refactor(packages): change package structure

examples/vite-app/cypress/components/hooks/useEdges.cy.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactFlow, { Edge, useEdges } from 'reactflow';
+import ReactFlow, { Edge, useEdges } from '@xyflow/react';
 
 import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodes.cy.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import ReactFlow, { Node, useNodes } from 'reactflow';
+import ReactFlow, { Node, useNodes } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useNodesInitialized } from 'reactflow';
+import ReactFlow, { useNodesInitialized } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 import ControlledFlow from '../../support/ControlledFlow';

examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useOnViewportChange, Viewport } from 'reactflow';
+import ReactFlow, { useOnViewportChange, Viewport } from '@xyflow/react';
 
 describe('useOnViewportChange.cy.tsx', () => {
   it('listen to viewport drag', () => {

examples/vite-app/cypress/components/hooks/useViewport.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useViewport, Viewport } from 'reactflow';
+import ReactFlow, { useViewport, Viewport } from '@xyflow/react';
 
 describe('useViewport.cy.tsx', () => {
   it('handles drag', () => {

examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { EdgeProps } from 'reactflow';
+import ReactFlow, { EdgeProps } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow';
+import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react';
 import * as simpleflow from '../../fixtures/simpleflow';
 
 function CustomEdge(props: EdgeProps) {

examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow from 'reactflow';
+import ReactFlow from '@xyflow/react';
 
 import { nodes, edges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/reactflow/view-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from 'reactflow';
+import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/cypress/components/utils/graph-utils.cy.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from 'reactflow';
+import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from '@xyflow/react';
 
 const nodes: Node[] = [
   {

examples/vite-app/cypress/fixtures/simpleflow.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from 'reactflow';
+import { Node, Edge } from '@xyflow/react';
 
 export const nodes: Node[] = [
   {

examples/vite-app/cypress/support/ControlledFlow.tsx

@@ -10,7 +10,7 @@ import {
   Connection,
   addEdge,
   ReactFlowProps,
-} from 'reactflow';
+} from '@xyflow/react';
 
 function ControlledFlow({
   addOnNodeChangeHandler = true,

examples/vite-app/cypress/support/component.ts

@@ -6,9 +6,9 @@ import './commands';
 import 'cypress-real-events/support';
 
 import { mount } from 'cypress/react18';
-import { XYPosition } from 'reactflow';
+import { XYPosition } from '@xyflow/react';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

examples/vite-app/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@reactflow/examples",
+  "name": "@xyflow/react-examples",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000 --open --host --force",
+    "dev": "vite --port 3000 --open --host",
     "serve": "vite serve --port 3000",
     "build": "vite build",
     "test:dev": "cypress open",
@@ -14,13 +14,13 @@
     "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
   },
   "dependencies": {
+    "@xyflow/react": "workspace:*",
     "classcat": "^5.0.3",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "reactflow": "workspace:*",
     "zustand": "^4.3.1"
   },
   "devDependencies": {
@@ -29,6 +29,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "cypress": "^10.6.0",
     "cypress-real-events": "^1.7.1",
     "start-server-and-test": "^1.14.0",

examples/vite-app/src/examples/Backgrounds/index.tsx

@@ -1,13 +1,14 @@
 import { FC } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   ReactFlowProvider,
   useNodesState,
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './style.module.css';
 

examples/vite-app/src/examples/Basic/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -9,7 +10,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);

examples/vite-app/src/examples/CancelConnection/data.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from 'reactflow';
+import { Edge, Node } from '@xyflow/react';
 
 export const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/CancelConnection/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   OnConnectStart,
   OnConnectEnd,
   useStore,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import useCountdown from './hooks/useCountdown';
 import { initialEdges, initialNodes } from './data';
@@ -21,7 +22,7 @@ const CANCEL_AFTER = 5; // seconds
 const CancelConnection = () => {
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const cancelConnection = useStore(state => state.cancelConnection)
+  const cancelConnection = useStore((state) => state.cancelConnection);
 
   // Cancels connection after 5 seconds
   const countdown = useCountdown(() => cancelConnection());
@@ -32,11 +33,7 @@ const CancelConnection = () => {
 
   return (
     <>
-      <Timer
-        duration={CANCEL_AFTER}
-        show={countdown.counting}
-        remaining={countdown.remaining}
-      />
+      <Timer duration={CANCEL_AFTER} show={countdown.counting} remaining={countdown.remaining} />
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -53,7 +50,7 @@ const CancelConnection = () => {
       </ReactFlow>
     </>
   );
-}
+};
 
 export default () => (
   <ReactFlowProvider>

examples/vite-app/src/examples/ControlledUncontrolled/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -7,7 +8,7 @@ import ReactFlow, {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const defaultNodes: Node[] = [
   {

examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx

@@ -1,4 +1,4 @@
-import { ConnectionLineComponentProps } from 'reactflow';
+import { ConnectionLineComponentProps } from '@xyflow/react';
 
 function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) {
   return (

examples/vite-app/src/examples/CustomConnectionLine/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   addEdge,
   Connection,
@@ -8,7 +9,7 @@ import ReactFlow, {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import ConnectionLine from './ConnectionLine';
 

examples/vite-app/src/examples/CustomMiniMapNode/index.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Background,
   BackgroundVariant,
@@ -13,7 +14,7 @@ import ReactFlow, {
   ReactFlowInstance,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, CSSProperties, useCallback } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from 'reactflow';
+import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };

examples/vite-app/src/examples/CustomNode/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Controls,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

examples/vite-app/src/examples/DefaultNodes/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -6,7 +7,7 @@ import ReactFlow, {
   Background,
   BackgroundVariant,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const defaultNodes: Node[] = [
   {

examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx

@@ -1,6 +1,5 @@
-import React, { memo, FC } from 'react';
-
-import { Handle, Position, NodeProps, Connection, Edge } from 'reactflow';
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, Connection, Edge } from '@xyflow/react';
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 

examples/vite-app/src/examples/DragHandle/index.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 import DragHandleNode from './DragHandleNode';
 

examples/vite-app/src/examples/DragNDrop/index.tsx

@@ -1,5 +1,6 @@
 import { useState, DragEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowProvider,
   addEdge,
   ReactFlowInstance,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   Controls,
   NodeOrigin,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import Sidebar from './Sidebar';
 

examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx

@@ -1,4 +1,4 @@
-import { ConnectionLineComponentProps, getStraightPath } from 'reactflow';
+import { ConnectionLineComponentProps, getStraightPath } from '@xyflow/react';
 
 function CustomConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle }: ConnectionLineComponentProps) {
   const [edgePath] = getStraightPath({

examples/vite-app/src/examples/EasyConnect/CustomNode.tsx

@@ -1,4 +1,4 @@
-import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
+import { Handle, NodeProps, Position, ReactFlowState, useStore } from '@xyflow/react';
 
 const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionStartHandle?.nodeId;
 

examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useStore, getStraightPath, EdgeProps } from 'reactflow';
+import { useStore, getStraightPath, EdgeProps } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 

examples/vite-app/src/examples/EasyConnect/index.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
-import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from 'reactflow';
+import { ReactFlow, Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
 import CustomConnectionLine from './CustomConnectionLine';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 import './style.css';
 
 const initialNodes: Node[] = [

examples/vite-app/src/examples/EasyConnect/utils.tsx

@@ -1,4 +1,4 @@
-import { Node, Position, MarkerType, XYPosition } from 'reactflow';
+import { Node, Position, MarkerType, XYPosition } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEvent } from 'react';
-import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/EdgeRenderer/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   Background,
   MiniMap,
@@ -11,7 +12,7 @@ import ReactFlow, {
   Node,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/vite-app/src/examples/EdgeRouting/index.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow';
+import { ReactFlow, Node, Edge, Position, MarkerType } from '@xyflow/react';
 
 const nodes: Node[] = [
   // LTR

examples/vite-app/src/examples/EdgeTypes/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   Controls,
   MiniMap,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import { getElements } from './utils';
 

examples/vite-app/src/examples/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from 'reactflow';
+import { Edge, Node, Position } from '@xyflow/react';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;

examples/vite-app/src/examples/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { BaseEdge, EdgeProps, getBezierPath } from 'reactflow';
+import { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/Edges/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/Edges/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   Background,
   MiniMap,
@@ -11,7 +12,7 @@ import ReactFlow, {
   Node,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/vite-app/src/examples/Empty/index.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   BackgroundVariant,
   Controls,
@@ -11,7 +12,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/Figma/index.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow';
+import { ReactFlow, Background, BackgroundVariant, Node, Edge, SelectionMode } from '@xyflow/react';
 
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 

examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,16 +1,10 @@
-import React, { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps, Node } from 'reactflow';
+import { FC } from 'react';
+import { getBezierPath, ConnectionLineComponentProps, Node } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
-const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  sourceNode,
-}) => {
-  if (!sourceNode) {
+const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fromPosition, toPosition, fromNode }) => {
+  if (!fromNode) {
     return null;
   }
 
@@ -18,23 +12,24 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
     id: 'connection-target',
     width: 1,
     height: 1,
-    position: { x: targetX, y: targetY },
+    position: { x: toX, y: toY },
   } as Node;
 
-  const { sx, sy } = getEdgeParams(sourceNode, targetNode);
-  const d = getBezierPath({
+  const { sx, sy } = getEdgeParams(fromNode, targetNode);
+
+  const [path] = getBezierPath({
     sourceX: sx,
     sourceY: sy,
-    sourcePosition,
-    targetPosition,
-    targetX,
-    targetY,
+    sourcePosition: fromPosition,
+    targetPosition: toPosition,
+    targetX: toX,
+    targetY: toY,
   });
 
   return (
     <g>
-      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
-      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={path} />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };

examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'reactflow';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 

examples/vite-app/src/examples/FloatingEdges/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   addEdge,
   ReactFlowInstance,
@@ -8,7 +9,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './style.module.css';
 

examples/vite-app/src/examples/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, XYPosition, Node, Edge } from 'reactflow';
+import { Position, XYPosition, Node, Edge } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/vite-app/src/examples/Hidden/index.tsx

@@ -1,6 +1,16 @@
 import { useState, useEffect, useCallback } from 'react';
 
-import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
+import {
+  ReactFlow,
+  addEdge,
+  Connection,
+  Edge,
+  Node,
+  useNodesState,
+  useEdgesState,
+  MiniMap,
+  Controls,
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/Interaction/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Connection,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   Controls,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {
@@ -36,7 +37,7 @@ const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edg
 const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
 const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
-const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
+const onMoveEnd = (_: TouchEvent | MouseEvent | null, viewport: Viewport) => console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);

examples/vite-app/src/examples/InteractiveMinimap/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -9,7 +10,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   XYPosition,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
@@ -139,8 +140,7 @@ const BasicFlow = () => {
       fitView
     >
       <Background variant={BackgroundVariant.Dots} />
-      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable
-               inversePan={inverse}/>
+      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable inversePan={inverse} />
       <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/vite-app/src/examples/Intersection/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   Controls,
@@ -8,7 +9,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import './style.css';
 

examples/vite-app/src/examples/Layouting/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import dagre from 'dagre';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   ReactFlowProvider,
   addEdge,
@@ -13,7 +14,7 @@ import ReactFlow, {
   EdgeMarker,
   Panel,
   useReactFlow,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import initialItems from './initial-elements';
 

examples/vite-app/src/examples/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, XYPosition, MarkerType } from 'reactflow';
+import { Node, Edge, XYPosition, MarkerType } from '@xyflow/react';
 
 const position: XYPosition = { x: 0, y: 0 };
 

examples/vite-app/src/examples/MultiFlows/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   addEdge,
   Node,
@@ -11,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './multiflows.module.css';
 

examples/vite-app/src/examples/NestedNodes/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   MiniMap,
   Background,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Edge,
   ReactFlowInstance,
   Connection,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 import ResizeIcon from './ResizeIcon';
 

examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizer } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizer } from '@xyflow/react';
 
 const DefaultResizerNode: FC<NodeProps> = ({ data, selected }) => {
   return (

examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 const HorizontalResizerNode: FC<NodeProps> = ({ data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/index.tsx

@@ -1,12 +1,22 @@
 import { useCallback, useState } from 'react';
-import ReactFlow, { Controls, addEdge, Connection, useNodesState, useEdgesState, Panel, Node, Edge } from 'reactflow';
+import {
+  ReactFlow,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Panel,
+  Node,
+  Edge,
+} from '@xyflow/react';
 
 import DefaultResizer from './DefaultResizer';
 import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 const nodeTypes = {
   defaultResizer: DefaultResizer,

examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
+import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (

examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx

@@ -1,4 +1,4 @@
-import { NodeToolbar, ReactFlowState, useStore } from 'reactflow';
+import { NodeToolbar, ReactFlowState, useStore } from '@xyflow/react';
 
 const selectedNodesSelector = (state: ReactFlowState) =>
   state

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -8,7 +9,7 @@ import ReactFlow, {
   NodeTypes,
   Position,
   NodeOrigin,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import SelectedNodesToolbar from './SelectedNodesToolbar';

examples/vite-app/src/examples/NodeTypeChange/index.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx

@@ -1,5 +1,6 @@
 import { useState, CSSProperties, FC, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Position,
@@ -9,7 +10,7 @@ import ReactFlow, {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/Overview/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Viewport,
@@ -13,7 +14,7 @@ import ReactFlow, {
   Controls,
   Background,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
 const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
@@ -36,8 +37,8 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
-const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
+const onMoveStart = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move end', viewport);
 const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
 const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
 const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);

examples/vite-app/src/examples/Provider/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useReactFlow, useStore } from 'reactflow';
+import { useReactFlow, useStore } from '@xyflow/react';
 
 import styles from './provider.module.css';
 

examples/vite-app/src/examples/Provider/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   ReactFlowProvider,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import Sidebar from './Sidebar';
 

examples/vite-app/src/examples/SaveRestore/Controls.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'reactflow';
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@xyflow/react';
 import localforage from 'localforage';
 
 import styles from './save.module.css';

examples/vite-app/src/examples/SaveRestore/index.tsx

@@ -1,5 +1,14 @@
 import { useCallback } from 'react';
-import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Node,
+  addEdge,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from '@xyflow/react';
 
 import Controls from './Controls';
 

examples/vite-app/src/examples/Stress/index.tsx

@@ -1,5 +1,6 @@
 import { useState, CSSProperties, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowInstance,
   Edge,
   Node,
@@ -12,7 +13,7 @@ import ReactFlow, {
   Controls,
   Background,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import { getNodesAndEdges } from './utils';
 

examples/vite-app/src/examples/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from 'reactflow';
+import { Node, Edge } from '@xyflow/react';
 
 type ElementsCollection = {
   nodes: Node[];

examples/vite-app/src/examples/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, Position } from '@xyflow/react';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {

examples/vite-app/src/examples/Subflow/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Edge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   MiniMap,
   Background,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import DebugNode from './DebugNode';
 

examples/vite-app/src/examples/Switch/index.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/TouchDevice/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react';
 
 import styles from './touch-device.module.css';
 

examples/vite-app/src/examples/Undirectional/CustomNode.tsx

@@ -1,6 +1,5 @@
-import React, { memo, FC, CSSProperties } from 'react';
-
-import { Handle, Position, NodeProps } from 'reactflow';
+import { memo, FC, CSSProperties } from 'react';
+import { Handle, Position, NodeProps } from '@xyflow/react';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',

examples/vite-app/src/examples/Undirectional/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   NodeTypes,
   addEdge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 

examples/vite-app/src/examples/UpdatableEdge/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   updateEdge,
   addEdge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   NodeChange,
   EdgeChange,
   HandleType,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UpdateNode/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 import styles from './updatenode.module.css';
 

examples/vite-app/src/examples/UseKeyPress/index.tsx

@@ -1,4 +1,4 @@
-import { useKeyPress } from 'reactflow';
+import { useKeyPress } from '@xyflow/react';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);

examples/vite-app/src/examples/UseNodesInit/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   Node,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   OnConnect,
   useNodesInitialized,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx

@@ -1,5 +1,5 @@
-import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+import { useState, memo, FC, useMemo, CSSProperties } from 'react';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 

examples/vite-app/src/examples/UseOnSelectionChange/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   ReactFlowProvider,
   Node,
@@ -9,7 +10,7 @@ import ReactFlow, {
   useEdgesState,
   useOnSelectionChange,
   OnSelectionChangeParams,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {
@@ -67,8 +68,8 @@ const WrappedFlow = () => (
     <Flow />
     <SelectionLogger />
     <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <input type={'text'} placeholder={'name'} />
-      </div>
+      <input type={'text'} placeholder={'name'} />
+    </div>
   </ReactFlowProvider>
 );
 

examples/vite-app/src/examples/UseReactFlow/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent, useEffect } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   Node,
@@ -11,7 +12,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,5 +1,5 @@
 import { useState, memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 

examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   NodeTypes,
   addEdge,
   useReactFlow,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Position,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 

examples/vite-app/src/examples/Validation/ConnectionStatus.tsx

@@ -1,4 +1,4 @@
-import { ReactFlowState, useStore } from 'reactflow';
+import { ReactFlowState, useStore } from '@xyflow/react';
 import { shallow } from 'zustand/shallow';
 
 import styles from './validation.module.css';

examples/vite-app/src/examples/Validation/index.tsx

@@ -1,5 +1,6 @@
 import { FC, useCallback, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Handle,
   Connection,
@@ -14,7 +15,8 @@ import ReactFlow, {
   OnConnect,
   updateEdge,
   Edge,
-} from 'reactflow';
+  IsValidConnection,
+} from '@xyflow/react';
 
 import ConnectionStatus from './ConnectionStatus';
 
@@ -27,7 +29,7 @@ const initialNodes: Node[] = [
   { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
 ];
 
-const isValidConnection = (connection: Connection) => connection.target === 'B';
+const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
 
 const CustomInput: FC<NodeProps> = () => (
   <>

examples/vite-app/src/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 
 import './index.css';
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>

examples/vite-app/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({