### Basic Svelte Flow Example

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/learn/concepts/terms-and-definitions.mdx

A foundational example demonstrating the basic terms and structure of a Svelte Flow graph. This is useful for understanding the initial setup and core components.

```svelte
<script lang="ts">
import { SvelteFlow, useSvelteFlow, Background, Controls } from '@xyflow/svelte';

const { nodes, edges, onNodesChange, onEdgesChange, addEdge } = useSvelteFlow();

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', label: 'edge 1-2' },
];

// Set initial nodes and edges
$nodes = initialNodes;
$edges = initialEdges;

function onConnect(params) {
  addEdge(params);
}
</script>

<div style="height: 100%; width: 100%;">
  <SvelteFlow
    nodes={$nodes}
    edges={$edges}
    onNodesChange={$onNodesChange}
    onEdgesChange={$onEdgesChange}
    onConnect={onConnect}
  >
    <Background />
    <Controls />
  </SvelteFlow>
</div>
```

--------------------------------

### Basic Svelte Flow Setup

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/svelte-flow-release.mdx

A fundamental example demonstrating how to initialize Svelte Flow with nodes, edges, and essential controls like Background, Controls, and Minimap. Ensure you import the necessary components and styles.

```svelte
<script>
  import { SvelteFlow, Background, Controls, Minimap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';

  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 0, y: 0 },
      data: { label: 'Hello' },
    },
    {
      id: '2',
      type: 'output',
      position: { x: 100, y: 100 },
      data: { label: 'World' },
    },
  ]);

  let edges = $state.raw([
    { id: '1-2', source: '1', target: '2', type: 'smoothstep', label: 'to the' },
  ]);
</script>

<SvelteFlow bind:nodes bind:edges fitView>
  <Background />
  <Controls />
  <Minimap />
</SvelteFlow>
```

--------------------------------

### Start Development Server

Source: https://github.com/xyflow/web/blob/main/CONTRIBUTING.md

Start the development server using pnpm.

```bash
pnpm dev
```

--------------------------------

### Scaffold Script Examples

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2024-10-16.mdx

Examples demonstrating how to use the scaffold script for creating new React or Svelte examples.

```bash
pnpm scaffold react blog/web-audio/demo
```

```bash
pnpm scaffold svelte guides/getting-started
```

--------------------------------

### Start Development Server

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/README.md

Starts a development server for the xyflow website.

```bash
pnpm start
```

--------------------------------

### Install Shadcn/ui Components

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/tutorials/getting-started-with-react-flow-components.mdx

Installs the dropdown-menu and button components from shadcn/ui.

```bash
npx shadcn@latest add dropdown-menu button
```

--------------------------------

### Completed Flow Example

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/learn/concepts/building-a-flow.mdx

This is the final state of the flow after completing the tutorial. It demonstrates a basic Svelte Flow setup with nodes and edges.

```svelte
<script lang="ts">
	import './styles.css';

	import { Controls, Background, MiniMap } from '@xyflow/svelte';

	import { useSvelteFlow } from '@xyflow/svelte';

	const { nodes, edges, onConnect, addNodesAndEdges } = useSvelteFlow();

	const initialNodes = [
		{
			id: '1',
			position: { x: 0, y: 0 },
			data: { label: 'Node 1' },
			type: 'input'
		},
		{
			id: '2',
			position: { x: 250, y: 200 },
			data: { label: 'Node 2' }
		},
		{
			id: '3',
			position: { x: 500, y: 100 },
			data: { label: 'Node 3' }
		}
	];

	const initialEdges = [
		{
			id: 'e1-2',
			source: '1',
			target: '2',
			label: 'edge from 1 to 2'
		}
	];

	addNodesAndEdges(initialNodes, initialEdges);
</script>

<div style="width: 100%; height: 500px;">
	<Controls />
	<MiniMap />
	<Background variant="dots" gap="16" size="1" />
	<SvelteFlow
		nodes={nodes}
		edges={edges}
		onConnect={onConnect}
		fitView
	/>
</div>

```

--------------------------------

### Fetch and Display Examples (JavaScript)

Source: https://github.com/xyflow/web/blob/main/apps/example-apps/index.html

Fetches example data from '/all.json' and dynamically populates lists for React and Svelte examples. It relies on the 'addLink' function and assumes the existence of elements with IDs 'examples-react' and 'examples-svelte'.

```javascript
fetch('/all.json')
  .then((res) => res.json())
  .then(({ react, svelte }) => {
    const reactList = document.getElementById('examples-react');
    react.forEach((path) => {
      addLink(reactList, 'react/', path);
    });
    const svelteList = document.getElementById('examples-svelte');
    svelte.forEach((path) => {
      addLink(svelteList, 'svelte/', path);
    });
  });
```

--------------------------------

### View Remote Example Overview

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2024-11-19.mdx

Loads and displays the feature overview example from a remote route. This is useful for showcasing integrated examples within your application.

```jsx
<RemoteCodeViewer
  route="examples/misc/overview"
  framework="react"
/>
```

--------------------------------

### Run Individual Site Development Servers

Source: https://github.com/xyflow/web/blob/main/README.md

Starts the development server for a specific site within the monorepo. Examples include reactflow.dev, svelteflow.dev, and xyflow.com.

```sh
pnpm run dev:reactflow.dev
```

```sh
pnpm run dev:svelteflow.dev
```

```sh
pnpm run dev:xyflow.com
```

```sh
pnpm run dev:style
```

--------------------------------

### React Flow with Elkjs Layout and Multiple Handles

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/layout/elkjs-multiple-handles.mdx

This example demonstrates setting up React Flow with the elkjs layout engine, configuring nodes to use multiple handles (ports) for optimized edge routing and reduced crossings. Ensure elkjs is installed and configured correctly for port-based layouting.

```jsx
import React, { useState, useCallback } from 'react';
import ReactFlow, { addEdge, Background, Controls, useNodesState, useEdgesState, MiniMap } from 'reactflow';
import ELK, { type LayoutOptions } from 'elkjs';

import './style.css';

const elkOptions = {
  'elk.algorithm': 'layered',
  'elk.direction': 'DOWN',
  'elk.portConstraints': 'FIXED_ORDER',
};

const elk = new ELK({
  // tslint:disable-next-line:no-unsafe-any
  defaultLayoutOptions: elkOptions as unknown as LayoutOptions,
});

const initialNodes = [
  {
    id: 'root',
    type: 'input',
    data: { label: 'Root' },
    position: { x: 0, y: 0 },
    ports: [
      { id: 'root-p1', side: 'TOP', x: 50, y: 0 },
      { id: 'root-p2', side: 'RIGHT', x: 100, y: 50 },
      { id: 'root-p3', side: 'BOTTOM', x: 50, y: 100 },
      { id: 'root-p4', side: 'LEFT', x: 0, y: 50 },
    ],
  },
  {
    id: 'child1',
    data: { label: 'Child 1' },
    position: { x: 0, y: 0 },
    ports: [
      { id: 'child1-p1', side: 'TOP', x: 50, y: 0 },
      { id: 'child1-p2', side: 'RIGHT', x: 100, y: 50 },
      { id: 'child1-p3', side: 'BOTTOM', x: 50, y: 100 },
      { id: 'child1-p4', side: 'LEFT', x: 0, y: 50 },
    ],
  },
  {
    id: 'child2',
    data: { label: 'Child 2' },
    position: { x: 0, y: 0 },
    ports: [
      { id: 'child2-p1', side: 'TOP', x: 50, y: 0 },
      { id: 'child2-p2', side: 'RIGHT', x: 100, y: 50 },
      { id: 'child2-p3', side: 'BOTTOM', x: 50, y: 100 },
      { id: 'child2-p4', side: 'LEFT', x: 0, y: 50 },
    ],
  },
  {
    id: 'child3',
    data: { label: 'Child 3' },
    position: { x: 0, y: 0 },
    ports: [
      { id: 'child3-p1', side: 'TOP', x: 50, y: 0 },
      { id: 'child3-p2', side: 'RIGHT', x: 100, y: 50 },
      { id: 'child3-p3', side: 'BOTTOM', x: 50, y: 100 },
      { id: 'child3-p4', side: 'LEFT', x: 0, y: 50 },
    ],
  },
];

const initialEdges = [
  { id: 'e1', source: 'root', sourceHandle: 'root-p2', target: 'child1', targetHandle: 'child1-p4' },
  { id: 'e2', source: 'root', sourceHandle: 'root-p3', target: 'child2', targetHandle: 'child2-p1' },
  { id: 'e3', source: 'child1', sourceHandle: 'child1-p3', target: 'child3', targetHandle: 'child3-p1' },
];

function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) =>
      setEdges((eds) =>
        addEdge({ ...params, type: 'smoothstep', animated: true }, eds)
      ),
    [setEdges]
  );

  const layout = useCallback(
    async (nodesToLayout, edgesToLayout) => {
      const layouted = await elk.layout({
        id: 'root',
        children: nodesToLayout.map((node) => ({
          ...node,
          // tslint:disable-next-line:no-unsafe-any
          ports: node.ports.map((port) => ({ ...port, id: `${node.id}-${port.id}` })),
        })),
        edges: edgesToLayout.map((edge) => ({
          ...edge,
          // tslint:disable-next-line:no-unsafe-any
          sourcePort: `${edge.source}-${edge.sourceHandle}`,
          // tslint:disable-next-line:no-unsafe-any
          targetPort: `${edge.target}-${edge.targetHandle}`,
        })),
      });

      // tslint:disable-next-line:no-unsafe-any
      return {
        nodes: layouted.children.map((node) => {
          const originalNode = nodesToLayout.find((n) => n.id === node.id);
          return {
            ...node,
            type: originalNode?.type,
            data: originalNode?.data,
            position: { x: node.x, y: node.y },
            ports: originalNode?.ports,
          };
        }),
        edges: edgesToLayout.map((edge) => ({
          ...edge,
          // tslint:disable-next-line:no-unsafe-any
          sourceHandle: `${edge.source}-${edge.sourceHandle}`,
          // tslint:disable-next-line:no-unsafe-any
          targetHandle: `${edge.target}-${edge.targetHandle}`,
        })),
      };
    },
    []
  );

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onConnect={onConnect}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      layout={layout}
    >
      <MiniMap />
      <Controls />
      <Background color="#aaa" gap={16} />
    </ReactFlow>
  );
}

export default App;

```

--------------------------------

### Install React Flow

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/concepts/building-a-flow.mdx

Install the React Flow package using npm or yarn.

```bash
npm install @xyflow/react
```

--------------------------------

### Start Development Server with pnpm

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/README.md

Starts the development server for the React Flow website, enabling hot-reloading and other development features.

```bash
pnpm run dev
```

--------------------------------

### Install Database Schema Node Component

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/react-flow-components.mdx

Use this command to install the database schema node component into your project.

```bash
npx shadcn-ui@latest add database-schema-node
```

--------------------------------

### Install React Flow Package

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/reactflow-npm-package-name.mdx

The recommended command to install the React Flow package after successfully acquiring the 'reactflow' name.

```sh
npm install reactflow
```

--------------------------------

### React Flow Feature Overview Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2024-05-06.mdx

A copy-pasteable example demonstrating the core features and functionalities of React Flow. This example is useful for understanding how to integrate and use React Flow in a new project.

```jsx
import React, { useState, useCallback } from 'react';
import ReactFlow, {
  addEdge,
  applyNodeChanges,
  applyEdgeChanges,
} from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  {
    id: '2',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
  },
  {
    id: '3',
    data: { label: 'Node 3' },
    position: { x: 400, y: 100 },
  },
  {
    id: '4',
    data: { label: 'Node 4' },
    position: { x: 400, y: 200 },
  },
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', label: 'edge 1-2' },
  { id: 'e1-3', source: '1', target: '3', label: 'edge 1-3' },
];

function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes]
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChange(changes, eds)),
    [setEdges]
  );
  const onConnect = useCallback(
    (connection) =>
      setEdges((eds) => addEdge(connection, eds)),
    [setEdges]
  );

  return (
    <div style={{ height: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
}

export default Flow;

```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/README.md

Installs all necessary project dependencies using the pnpm package manager.

```bash
pnpm install
```

--------------------------------

### Feature Overview Example

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/examples/overview.mdx

Demonstrates various Svelte Flow features including node and edge types, controls, and minimap. This example is loaded remotely.

```svelte
<script lang="ts">
	import type { Edge, Node } from '@xyflow/svelte';
	import { Background, Controls, MiniMap, SvelteFlow, type SvelteFlowStore, useSvelteFlow } from '@xyflow/svelte';

	import './styles.css';

	const nodes: Node[] = [
		{
			id: '1',
			position: { x: 0, y: 0 },
			data: { label: 'Node 1' },
			type: 'input'
		},
		{
			id: '2',
			position: { x: 250, y: 50 },
			data: { label: 'Node 2' },
			// you can also override the type
			type: 'output'
		},
		{
			id: '3',
			position: { x: 400, y: 200 },
			data: { label: 'Node 3' },
			// you can also override the type
			type: 'default'
		},
		{
			id: '4',
			position: { x: 400, y: 300 },
			data: { label: 'Node 4' },
			type: 'default'
		}
	];

	const edges: Edge[] = [
		{ id: 'e1-2', source: '1', target: '2', label: 'edge label 1' },
		{ id: 'e1-3', source: '1', target: '3', type: 'step', label: 'edge label 2' },
		{ id: 'e3-4', source: '3', target: '4', type: 'smoothstep', label: 'edge label 3' }
	];

	const { onPaneReady, ...rest } = useSvelteFlow();
</script>

<SvelteFlow {nodes} {edges} onPaneReady={onPaneReady} fitView>
	<MiniMap />
	<Controls />
	<Background />
</SvelteFlow>

```

--------------------------------

### Install React Flow and React Remark

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/tutorials/slide-shows-with-react-flow.mdx

Installs the necessary dependencies for React Flow and markdown rendering.

```bash
npm install @xyflow/react react-remark
```

--------------------------------

### Install Zoom Slider Component

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/react-flow-components.mdx

Use this command to install the zoom slider component into your project.

```bash
npx shadcn-ui@latest add zoom-slider
```

--------------------------------

### Entitree Flex Layout Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2024-06-11.mdx

Displays an example of the Entitree Flex layout algorithm in a React framework. This component is loaded from a remote viewer.

```jsx
<RemoteCodeViewer
  route="examples/layout/entitree-flex"
  framework="react"
/>
```

--------------------------------

### Dagre Layout Example

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/examples/layout/dagre.mdx

Integrates Dagre.js for hierarchical graph layout in Svelte Flow. Ensure Dagre is installed and imported for this example to function.

```javascript
import dagre from 'dagre';
import { writable } from 'svelte/store';

const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));

export const dagreLayout = writable(false);

export function useDagreLayout(nodes, edges) {
  dagreGraph.nodes().forEach((v) => dagreGraph.removeNode(v));
  dagreGraph.edges().forEach((e) => dagreGraph.removeEdge(e));

  nodes.forEach((node) => {
    dagreGraph.setNode(node.id, { label: node.label, width: node.width, height: node.height });
  });

  edges.forEach((edge) => {
    dagreGraph.setEdge(edge.source, edge.target);
  });

  dagre.layout(dagreGraph);

  return nodes.map((node) => {
    const nodeWithPosition = dagreGraph.node(node.id);

    return {
      ...node,
      targetPosition: 'top',
      sourcePosition: 'bottom',
      position: {
        x: nodeWithPosition.x - node.width / 2 + node.width,
        y: nodeWithPosition.y - node.height / 2 + node.height
      }
    };
  });
}

```

--------------------------------

### React Flow Elkjs Layout Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/layout/elkjs.mdx

This example integrates elkjs for tree layouts in React Flow. It requires installing elkjs and its React Flow adapter.

```jsx
import React, { useState, useEffect } from 'react';
import ReactFlow, { ReactFlowProvider, addEdge, useNodesState, useEdgesState, MiniMap, Controls, Background, Panel } from 'reactflow';
import ELK, { LayoutOptions } from 'elkjs';

import 'reactflow/dist/style.css';

const elk = new ELK();

const elkOptions = {
  'elk.algorithm': 'layered',
  'elk.direction': 'DOWN',
};

const nodeKey = (node) => node.id;
const edgeKey = (edge) => edge.id;

const App = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  useEffect(() => {
    const elkLayout = async () => {
      const elkNodes = [
        { id: 'root', width: 150, height: 50, label: 'Root' },
        { id: 'child1', width: 150, height: 50, label: 'Child 1' },
        { id: 'child2', width: 150, height: 50, label: 'Child 2' },
        { id: 'grandchild1', width: 150, height: 50, label: 'Grandchild 1' },
        { id: 'grandchild2', width: 150, height: 50, label: 'Grandchild 2' },
      ];

      const elkEdges = [
        { id: 'e1', source: 'root', target: 'child1' },
        { id: 'e2', source: 'root', target: 'child2' },
        { id: 'e3', source: 'child1', target: 'grandchild1' },
        { id: 'e4', source: 'child1', target: 'grandchild2' },
      ];

      const layout = await elk.layout(elkNodes, elkEdges, elkOptions as LayoutOptions);

      setNodes(layout.children.map((node) => ({
        id: node.id,
        data: { label: node.label },
        position: { x: node.x, y: node.y },
        style: {
          background: '#fff',
          border: '1px solid #000',
          width: node.width,
          height: node.height,
        },
      })));

      setEdges(elkEdges.map((edge) => ({
        id: edge.id,
        source: edge.source,
        target: edge.target,
        type: 'default',
        animated: true,
        style: {
          stroke: '#000',
          strokeWidth: 2,
        },
      })));
    };

    elkLayout();
  }, []);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        nodeKey={nodeKey}
        edgeKey={edgeKey}
      >
        <MiniMap />
        <Controls />
        <Background variant="dots" gap={12} size={1} />
        <Panel position="top-left">
          <button onClick={() => alert('This is a button!')}>Top Left Panel</button>
        </Panel>
      </ReactFlow>
    </div>
  );
};

export default () => (
  <ReactFlowProvider>
    <App />
  </ReactFlowProvider>
);

```

--------------------------------

### React Flow Dark Mode Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/styling/dark-mode.mdx

This example demonstrates how to use the `colorMode` prop in React Flow to enable dark mode. Ensure you have React Flow installed and imported.

```jsx
import React from 'react';
import ReactFlow, { Background, Controls } from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
];

const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'default',
    animated: true,
  },
];

function DarkModeFlow() {
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        fitView
        colorMode="dark"
      >
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default DarkModeFlow;
```

--------------------------------

### Delete Edge on Drop Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/edges/delete-edge-on-drop.mdx

This example shows how to delete an edge by using the onReconnect, onReconnectStart, and onReconnectEnd handlers. If you drag an existing edge and drop it on the pane, it gets deleted from the edges array.

```jsx
import React, { useState, useCallback } from 'react';
import ReactFlow, { ReactFlowProvider, addEdge, useNodesState, useEdgesState, Controls, Background, MiniMap } from 'reactflow';
import './react-flow-styles.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 300, y: 0 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2', type: 'default' }];

const deleteKeyCode = 'Delete';

function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [reactFlowInstance, setReactFlowInstance] = useState(null);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  const onEdgesDelete = useCallback(
    (edge) => {
      setEdges((eds) => eds.filter((e) => e.id !== edge.id));
    },
    [setEdges]
  );

  const onPaneClick = useCallback(() => console.log('onPaneClick'), []);

  const onEdgeContextMenu = useCallback(
    (event, edge) => {
      event.preventDefault();
      // here you can add your custom context menu
      console.log('onEdgeContextMenu', edge);
    },
    []
  );

  const onEdgesMove = useCallback(
    (evt, edges) => {
      console.log('onEdgesMove', evt, edges);
      return edges;
    },
    []
  );

  const onEdgeUpdateStart = useCallback((event, edge) => {
    console.log('onEdgeUpdateStart', event, edge);
  }, []);

  const onEdgeUpdate = useCallback(
    (oldEdge, newConnection) => {
      console.log('onEdgeUpdate', oldEdge, newConnection);
      setEdges((els) =>
        els.map((el) => {
          if (el.id === oldEdge.id) {
            return { ...el, ...newConnection };
          }
          return el;
        })
      );
    },
    [setEdges]
  );

  const onEdgeUpdateEnd = useCallback(
    (event, edge) => {
      console.log('onEdgeUpdateEnd', event, edge);
      // if the edge is not connected to any node, delete it
      if (!edge.target) {
        onEdgesDelete(edge);
      }
    },
    [onEdgesDelete]
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onPaneClick={onPaneClick}
        onEdgeContextMenu={onEdgeContextMenu}
        onEdgesDelete={onEdgesDelete}
        onEdgesMove={onEdgesMove}
        onEdgeUpdateStart={onEdgeUpdateStart}
        onEdgeUpdate={onEdgeUpdate}
        onEdgeUpdateEnd={onEdgeUpdateEnd}
        fitView
        onInit={setReactFlowInstance}
      >
        <Controls />
        <MiniMap />
        <Controls />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

export default function DeleteEdgeOnDrop() {
  return (
    <ReactFlowProvider>
      <App />
    </ReactFlowProvider>
  );
}

```

--------------------------------

### React Edge Label Renderer Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/edges/edge-label-renderer.mdx

Demonstrates how to use the EdgeLabelRenderer to render custom HTML labels for edges in React Flow. This example shows a basic setup for displaying labels as divs.

```jsx
import React from 'react';
import ReactFlow, { EdgeLabelRenderer, MarkerType, Position } from 'reactflow';

import 'reactflow/dist/style.css';

const nodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  {
    id: '2',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
  },
  {
    id: '3',
    data: { label: 'Node 3' },
    position: { x: 400, y: 100 },
  },
  {
    id: '4',
    type: 'output',
    data: { label: 'Node 4' },
    position: { x: 400, y: 200 },
  },
];

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'smoothstep',
    label: 'Edge Label 1',
    labelStyle: {
      transform: 'translate(-50%, 0) rotate(-45deg)',
      fontSize: '12px',
      padding: '4px',
      background: '#ffcc00',
      borderRadius: '5px',
      color: '#333',
      border: '1px solid #333',
    },
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    type: 'smoothstep',
    label: 'Edge Label 2',
    labelStyle: {
      fontSize: '12px',
      padding: '4px',
      background: '#32cd32',
      borderRadius: '5px',
      color: '#fff',
      border: '1px solid #228b22',
    },
  },
  {
    id: 'e3-4',
    source: '3',
    target: '4',
    type: 'smoothstep',
    label: 'Edge Label 3',
    labelStyle: {
      fontSize: '12px',
      padding: '4px',
      background: '#ffa500',
      borderRadius: '5px',
      color: '#000',
      border: '1px solid #da70d6',
    },
  },
];

function EdgeLabelRendererFlow() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges} fitView>
        <EdgeLabelRenderer />
      </ReactFlow>
    </div>
  );
}

export default EdgeLabelRendererFlow;

```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/tutorials/getting-started-with-react-flow-components.mdx

Run the shadcn/ui CLI to initialize the library in your project. This command configures the project, installs dependencies, and generates necessary files like components.json.

```bash
npx shadcn@latest init
```

--------------------------------

### Detached Handle Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2025-08-14.mdx

Demonstrates how to position child content of a handle outside the handle itself and use it as a connection starting point.

```jsx
import React from 'react';
import { ReactFlow, Handle, Position } from '@xyflow/react';

function CustomNode({ data }) {
  return (
    <div className="custom-node custom-node-detached-handle">
      <div className="node-content">{data.label}</div>
      <Handle type="source" position={Position.Right} id="a" />
      <Handle type="source" position={Position.Right} id="b" style={{ top: 70, background: '#555' }}>
        <div className="detached-handle-content">Detached</div>
      </Handle>
    </div>
  );
}

const initialNodes = [
  { id: '1', type: 'custom', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
];

const initialEdges = [];

function App() {
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} nodeTypes={{ custom: CustomNode }} fitView />
    </div>
  );
}

export default App;
```

--------------------------------

### Initialize shadcn-ui

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/ui/index.mdx

Run this command to initialize shadcn-ui in your project if it's not already configured. Ensure shadcn and tailwind are set up first.

```bash
npx shadcn@latest init
```

--------------------------------

### Run Documentation Development Servers

Source: https://github.com/xyflow/web/blob/main/README.md

Starts the development servers specifically for the documentation sites (React Flow and Svelte Flow).

```sh
pnpm run dev:docs
```

--------------------------------

### Svelte Flow Vite Template Installation

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/learn/index.mdx

Use the degit command to clone the Svelte Flow Vite template for a quick setup.

```bash
npx degit xyflow/vite-svelte-flow-template app-name
```

--------------------------------

### Initialize Audio Context and Node Map

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/tutorials/react-flow-and-the-web-audio-api.mdx

Sets up the necessary AudioContext and a Map to store audio nodes. This is the initial setup for managing audio elements.

```javascript
const context = new AudioContext();
const nodes = new Map();
```

--------------------------------

### Configure Main Entry Point with ReactFlowProvider

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/tutorials/slide-shows-with-react-flow.mdx

Sets up the main application entry point, including React Flow's styles and the ReactFlowProvider for context.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReactFlowProvider } from '@xyflow/react';

import App from './App';

import '@xyflow/react/dist/style.css';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ReactFlowProvider>
      {/* The parent element of the React Flow component needs a width and a height
          to work properly. If you're styling your app as you follow along,
          you can remove this div and apply styles to the #root element in your CSS.
       */}
      <div style={{ width: '100vw', height: '100vh' }}>
        <App />
      </div>
    </ReactFlowProvider>
  </React.StrictMode>,
);

```

--------------------------------

### Get ReactFlowInstance and Count Nodes in React

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/api-reference/hooks/use-react-flow.mdx

This example demonstrates how to use the useReactFlow hook to get the ReactFlowInstance and then use it to count the number of nodes in the flow. It requires React and the @xyflow/react library. The output is a button that updates a paragraph displaying the node count.

```jsx
import { useCallback, useState } from 'react';
import { useReactFlow } from '@xyflow/react';

export function NodeCounter() {
  const reactFlow = useReactFlow();
  const [count, setCount] = useState(0);
  const countNodes = useCallback(() => {
    setCount(reactFlow.getNodes().length);
    // you need to pass it as a dependency if you are using it with useEffect or useCallback
    // because at the first render, it's not initialized yet and some functions might not work.
  }, [reactFlow]);

  return (
    <div>
      <button onClick={countNodes}>Update count</button>
      <p>There are {count} nodes in the flow.</p>
    </div>
  );
}
```

--------------------------------

### Svelte Edge Markers Example

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/examples/edges/edge-markers.mdx

Shows how to add custom SVG markers to the start and end of edges in Svelte Flow. Requires SVG marker definitions.

```svelte
<script lang="ts">

import { Background, Controls, SvelteFlow, useSvelteFlow, type Edge, type Node, MarkerType } from '@xyflow/svelte';

const initialNodes: Node[] = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 200, y: 100 }, data: { label: 'Node 2' } },
  { id: '3', position: { x: 400, y: 0 }, data: { label: 'Node 3' } },
];

const initialEdges: Edge[] = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    label: 'edge with markers',
    markerEnd: MarkerType.ArrowClosed,
    markerStart: MarkerType.ArrowClosed,
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    label: 'edge with custom marker',
    markerEnd: {
      type: MarkerType.Custom,
      color: '#ff0000',
      height: 20,
      offset: 5,
      stroke: '#ff0000',
      width: 20,
    },
    markerStart: {
      type: MarkerType.Custom,
      color: '#0000ff',
      height: 20,
      offset: 5,
      stroke: '#0000ff',
      width: 20,
    },
  },
];

</script>

<div style="height: 500px;">
  <SvelteFlow {initialNodes} {initialEdges}>
    <Background />
    <Controls />
  </SvelteFlow>
</div>

```

--------------------------------

### Create New React Project with Vite

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/index.mdx

Initialize a new React project using Vite, the recommended tool for creating React Flow projects.

```bash
npm init vite my-react-flow-app -- --template react
```

--------------------------------

### D3-Force Layout Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/layouting/layouting.mdx

Demonstrates using D3-Force for physics-based graph layouting in React Flow. It utilizes a custom hook `useLayoutedElements` and functions to get nodes and edges from the store.

```jsx
import { ReactFlow, useReactFlow } from '@xyflow/react';
import { useLayoutedElements } from './useLayoutedElements';

const LayoutFlow = () => {
  const { getNodes, getEdges } = useReactFlow();

  const { nodes, edges } = useLayoutedElements(getNodes, getEdges);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      fitView
    />
  );
};

export default LayoutFlow;
```

--------------------------------

### Scaffold Script Usage for New Examples

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2024-10-16.mdx

Use this script to quickly set up new examples for reactflow.dev or svelteflow.dev by copying boilerplate code. All arguments are required.

```bash
pnpm scaffold <FRAMEWORK> <ROUTE>
```

--------------------------------

### Add shadcn/ui Component

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2025-10-28.mdx

Installs a shadcn/ui component into your project. This command fetches and integrates the specified component's code.

```bash
npx shadcn@latest add component-name
```

--------------------------------

### Empty Svelte Flow for Layouting Examples

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/learn/layouting/overview.mdx

This is a base Svelte Flow component used to test different layouting options. It serves as a starting point for integrating various layouting libraries.

```svelte
<script lang="ts">
import { Background, Controls, SvelteFlow, type Edge, type Node } from '@sveltejs/flow';

const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 0, y: 0 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 200, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 200 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 600, y: 300 } },
];

const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e2-4', source: '2', target: '4' },
  { id: 'e3-4', source: '3', target: '4' },
];
</script>

<SvelteFlow
  nodes={initialNodes}
  edges={initialEdges}
  fitView
>
  <Background />
  <Controls />
</SvelteFlow>

```

--------------------------------

### SvelteKit Project Creation

Source: https://github.com/xyflow/web/blob/main/sites/svelteflow.dev/src/content/learn/index.mdx

Create a new SvelteKit project using the npx command.

```bash
npx sv create my-svelte-flow-app
```

--------------------------------

### Basic Uncontrolled Flow Setup

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/learn/advanced-use/uncontrolled-flow.mdx

This example shows a basic implementation of an uncontrolled React Flow component. It configures default edge options, such as animation, directly within the component props.

```jsx
import React from 'react';
import ReactFlow, { Background, Controls, defaultEdgeOptions } from 'reactflow';

const flowStyles = {
  width: '100%',
  height: '500px',
};

function Flow() {
  return (
    <div style={flowStyles}>
      <ReactFlow defaultEdgeOptions={defaultEdgeOptions} />
      <Background />
      <Controls />
    </div>
  );
}

export default Flow;
```

--------------------------------

### Benchmark Setup with Vitest

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/node-collision-detection-algorithms.mdx

Sets up concurrent benchmarks for different datasets using Vitest's bench command. Each dataset is tested with a 'naive' collision detection function.

```typescript
datasets.forEach((dataset) => {
  describe.concurrent(dataset, () => {
    bench(
      'naive',
      () => {
        naive(nodes, options);
      },
      benchOptions,
    );
  });
});
```

--------------------------------

### Basic React Flow Usage with New Imports

Source: https://github.com/xyflow/web/blob/main/sites/xyflow.com/src/content/blog/react-flow-v11.mdx

Import React Flow components and styles using the new package name '@xyflow/react'. This example shows a basic setup with controls and background.

```jsx
import { ReactFlow,  Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

...

<ReactFlow nodes={nodes} edges={edges}>
  <Controls />
  <Background />
</ReactFlow>
```

--------------------------------

### Custom Node Resizer Example

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/examples/nodes/node-resizer.mdx

This example demonstrates how to implement a custom resizing UI for nodes using the `<NodeResizeControl />` component. Ensure you have the necessary React Flow imports and a basic React application structure.

```jsx
import React from 'react';
import ReactFlow, { ReactFlowProvider, Controls, Background, useNodesState, useEdgesState, addEdge, NodeResizer, NodeResizeControl } from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  {
    id: '1',
    type: 'custom',
    data: { label: 'Node 1' },
    position: { x: 300, y: 50 },
  },
];

const initialEdges = [];

const nodeTypes = {
  custom: ({ id, data, selected, xPos, yPos, ...props }) => (
    <div style={{ padding: 10, background: '#fff', border: '1px solid #ddd', borderRadius: 4 }}>
      <div>{data.label}</div>
      <NodeResizer {...props} />
    </div>
  ),
};

function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        fitView
      >
        <Controls />
        <Background />
      </ReactFlow>
    </div>
  );
}

export default () => (
  <ReactFlowProvider>
    <App />
  </ReactFlowProvider>
);

```

--------------------------------

### Update Dependencies with npm/yarn

Source: https://github.com/xyflow/web/blob/main/sites/reactflow.dev/src/content/whats-new/2025-10-28.mdx

Installs the latest versions of React and Tailwind CSS. This is the first step in upgrading the project's core dependencies.

```bash
npm install react@latest react-dom@latest tailwindcss@latest
```

```bash
yarn add react@latest react-dom@latest tailwindcss@latest
```