initial boilerplate

src/App.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  useNodesState,
+  useEdgesState,
+  Node,
+  Edge,
+  Connection,
+  NodeChange,
+  EdgeChange,
+} from 'reactflow'
+import CustomNode from './components/CustomNode'
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    position: { x: 250, y: 5 },
+    data: { label: 'Node A' },
+    type: 'custom',
+  },
+  {
+    id: '2',
+    position: { x: 100, y: 200 },
+    data: { label: 'Node B' },
+    type: 'custom',
+  },
+]
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+export default function App() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+
+  const nodeTypes = React.useMemo(() => ({ custom: CustomNode }), [])
+
+  const onConnect = React.useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  )
+
+  return (
+    <div className="reactflow-wrapper">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+      >
+        <Background />
+        <Controls />
+        <MiniMap />
+      </ReactFlow>
+    </div>
+  )
+}