React Flow

https://reactflow.dev
Admin
A customizable React component library for building interactive node-based editors and diagrams,...
Tokens:498,522
Snippets:3,368
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### React Flow Quickstart: index.jsx, index.html, index.css, App.jsx

Source: https://reactflow.dev/llms-full.txt

These files form the complete React Flow quickstart example. index.jsx mounts the App component, index.html provides the HTML shell, index.css sets full-viewport styling, and App.jsx defines the interactive flow with nodes, edges, and built-in controls.

```jsx
import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
```

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

```jsx
import {
  Background,
  Controls,
  MiniMap,
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { useCallback, useState } from 'react';

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

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

  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        colorMode="system"
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}
```

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

### Install shadcn/ui components for number node

Source: https://reactflow.dev/llms-full.txt

Install the shadcn/ui dropdown-menu and button components required by the number node example.

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

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

### Install @xyflow/react

Source: https://reactflow.dev/examples/interaction/helper-lines

Install the only required dependency for this example, @xyflow/react, which provides the useHelperLines hook and related components.

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

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

### Vite interactive setup output

Source: https://reactflow.dev/llms-medium.txt

Example interactive setup output for the Vite scaffold command. Shows the expected prompts and selections for creating a React TypeScript project.

```text
◇  Project name:
│  my-react-flow-app
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with pnpm and start now?
│  Yes
│
◇  Scaffolding project in /Users/alessandro/src/xyflow/wip/component-style-test-2...
│
◇  Installing dependencies with pnpm...
```

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

### Mindmap tutorial example files (store.ts, index.tsx, index.html, index.css)

Source: https://reactflow.dev/llms-medium.txt

Complete example files for the mindmap tutorial: store.ts (Zustand store), index.tsx (React entry point), index.html (HTML shell), and index.css (global styles). These files together form the runnable example.

```ts
import {
  applyNodeChanges,
  applyEdgeChanges,
  type Edge,
  type EdgeChange,
  type Node,
  type NodeChange,
  type OnNodesChange,
  type OnEdgesChange,
} from '@xyflow/react';
import { create } from 'zustand';

export type RFState = {
  nodes: Node[];
  edges: Edge[];
  onNodesChange: OnNodesChange;
  onEdgesChange: OnEdgesChange;
};

const useStore = create<RFState>((set, get) => ({
  nodes: [
    {
      id: 'root',
      type: 'mindmap',
      data: { label: 'React Flow Mind Map' },
      position: { x: 0, y: 0 },
    },
  ],
  edges: [],
  onNodesChange: (changes: NodeChange[]) => {
    set({
      nodes: applyNodeChanges(changes, get().nodes),
    });
  },
  onEdgesChange: (changes: EdgeChange[]) => {
    set({
      edges: applyEdgeChanges(changes, get().edges),
    });
  },
}));

export default useStore;
```

```tsx
import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>
```

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

html,
body,
#root {
  height: 100%;
}
```

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

### Base React Flow layouting example (nodes-edges.js, index.jsx, index.html, index.css, App.jsx)

Source: https://reactflow.dev/llms-full.txt

Base React Flow example with initial nodes and edges, entry point, HTML shell, global styles, and App component. The App component uses useNodesState/useEdgesState and a placeholder getLayoutedElements that returns nodes and edges unchanged, with an onLayout callback that updates state and calls fitView. This setup is the foundation for the layouting examples that follow.

```js
export const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'input' },
    position: { x: 0, y: 0 },
  },
  {
    id: '2',
    data: { label: 'node 2' },
    position: { x: 0, y: 100 },
  },
  {
    id: '2a',
    data: { label: 'node 2a' },
    position: { x: 0, y: 200 },
  },
  {
    id: '2b',
    data: { label: 'node 2b' },
    position: { x: 0, y: 300 },
  },
  {
    id: '2c',
    data: { label: 'node 2c' },
    position: { x: 0, y: 400 },
  },
  {
    id: '2d',
    data: { label: 'node 2d' },
    position: { x: 0, y: 500 },
  },
  {
    id: '3',
    data: { label: 'node 3' },
    position: { x: 200, y: 100 },
  },
];

export const initialEdges = [
  { id: 'e12', source: '1', target: '2', animated: true },
  { id: 'e13', source: '1', target: '3', animated: true },
  { id: 'e22a', source: '2', target: '2a', animated: true },
  { id: 'e22b', source: '2', target: '2b', animated: true },
  { id: 'e22c', source: '2', target: '2c', animated: true },
  { id: 'e2c2d', source: '2c', target: '2d', animated: true },
];
```

```jsx
import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
```

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

```jsx
import { useCallback } from 'react';
import {
  ReactFlow,
  ReactFlowProvider,
  useNodesState,
  useEdgesState,
  useReactFlow,
} from '@xyflow/react';

import { initialNodes, initialEdges } from './nodes-edges.js';
import '@xyflow/react/dist/style.css';

const getLayoutedElements = (nodes, edges) => {
  return { nodes, edges };
};

const LayoutFlow = () => {
  const { fitView } = useReactFlow();
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onLayout = useCallback(() => {
    const layouted = getLayoutedElements(nodes, edges);

    setNodes([...layouted.nodes]);
    setEdges([...layouted.edges]);

    fitView();
  }, [nodes, edges]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      colorMode="system"
    />
  );
};

export default function () {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  );
}
```

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

### Install NodeStatusIndicator with bun

Source: https://reactflow.dev/ui/components/node-status-indicator

Install the component using bun via the shadcn CLI. Requires following the prerequisites before installing.

```bash
bun x shadcn@latest add https://ui.reactflow.dev/node-status-indicator
```

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

### Install NodeAppendix with bun x

Source: https://reactflow.dev/ui/components/node-appendix

Use this command to install the NodeAppendix component with bun. Ensure you have followed the prerequisites before installing.

```bash
bun x shadcn@latest add https://ui.reactflow.dev/node-appendix
```

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

### Default styles example (index.tsx and index.css)

Source: https://reactflow.dev/llms-medium.txt

Default styles example: the entry point renders the App into the #app container, and the CSS imports React Flow's stylesheet and sets the container to fill the viewport. These files are part of the same example and are required together to set up the default styling.

```tsx
import { createRoot } from 'react-dom/client';
import App from './App';


const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```css
@import url('@xyflow/react/dist/style.css');
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

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

### Install required packages

Source: https://reactflow.dev/llms-medium.txt

Installs React Flow, Zustand for state management, classcat for class names, and nanoid for generating unique IDs. Zustand is used because React Flow also uses it, so there is no additional cost.

```bash
npm install reactflow zustand classcat nanoid
```

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

### Install Babel packages for webpack 4

Source: https://reactflow.dev/llms-medium.txt

Install the required Babel packages to make React Flow work with webpack 4. This command installs babel-loader and the necessary presets and plugins.

```sh
npm i --save-dev babel-loader@8.2.5 @babel/preset-env @babel/preset-react @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
```

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

### Custom Node with Multiple Handles Example

Source: https://reactflow.dev/llms-medium.txt

Complete example files for a custom node with multiple handles. The TextUpdaterNode defines two source handles with ids 'a' and 'b', and the App.jsx connects edges to those handles. The index.jsx, index.html, and index.css provide the entry point and styling.

```jsx
import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
```

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}

.text-updater-node {
  height: 50px;
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 5px;
  background: white;
}

.text-updater-node label {
  display: block;
  color: #777;
  font-size: 12px;
}
```

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

const handleStyle = { left: 10 };

function TextUpdaterNode(props) {
  return (
    <div className="text-updater-node">
      <div>Custom Node</div>
      <Handle type="target" position={Position.Top} />
      <Handle type="source" position={Position.Bottom} id="a" style={handleStyle} />
      <Handle type="source" position={Position.Bottom} id="b" />
    </div>
  );
}

export default TextUpdaterNode;
```

```jsx
import { useCallback, useState } from 'react';
import {
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

import TextUpdaterNode from './TextUpdaterNode';

const rfStyle = {
  backgroundColor: '#B8CEFF',
};

const initialNodes = [
  {
    id: 'node-1',
    type: 'textUpdater',
    position: { x: 100, y: 0 },
    data: { value: 123 },
  },
  {
    id: 'node-2',
    type: 'output',
    targetPosition: 'top',
    position: { x: 0, y: 200 },
    data: { label: 'node 2' },
  },
  {
    id: 'node-3',
    type: 'output',
    targetPosition: 'top',
    position: { x: 200, y: 200 },
    data: { label: 'node 3' },
  },
];

const initialEdges = [
  { id: 'edge-1', source: 'node-1', target: 'node-2', sourceHandle: 'a' },
  { id: 'edge-2', source: 'node-1', target: 'node-3', sourceHandle: 'b' },
];

// we define the nodeTypes outside of the component to prevent re-renderings
// you could also use useMemo inside the component
const nodeTypes = { textUpdater: TextUpdaterNode };

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

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      fitView
      style={rfStyle}
      colorMode="system"
    />
  );
}

export default Flow;
```

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

### nodes.js - initial nodes for React Flow

Source: https://reactflow.dev/llms-medium.txt

Defines the initial nodes for the React Flow example. Each node has an id, a label, and a position. This file is imported by App.jsx.

```js
export const initialNodes = [
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 150, y: 0 },
  },
  {
    id: '2',
    data: { label: 'Node 2' },
    position: { x: 0, y: 150 },
  },
  {
    id: '3',
    data: { label: 'Node 3' },
    position: { x: 300, y: 150 },
  },
];
```

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

### New API: React Flow with nodes and edges

Source: https://reactflow.dev/llms-medium.txt

New API example using `nodes`, `edges`, `onNodesChange`, and `onEdgesChange` handlers with `applyNodeChanges` and `applyEdgeChanges`. This is the controlled mode for interactive flows.

```jsx
import { useState, useCallback } from 'react';
import {
  ReactFlow,
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
} from 'react-flow-renderer';

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

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

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

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

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    />
  );
};

export default BasicFlow;
```

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

### CounterNode example node component (component-example.tsx)

Source: https://reactflow.dev/llms-medium.txt

Example node component that pairs with the DataEdge example. It renders a slider that updates the node's `data.value` via `updateNodeData`, and includes a source handle at the bottom. The `CounterNodeType` is a `Node` with `data: { value: number }`.

```tsx
import { Handle, NodeProps, Position, useReactFlow, Node } from "@xyflow/react";

import { memo } from "react";
import { BaseNode, BaseNodeContent } from "@/registry/components/base-node";
import { Slider } from "@/components/ui/slider";

export type CounterNodeType = Node<{ value: number }>;

export const CounterNode = memo(({ id, data }: NodeProps<CounterNodeType>) => {
  const { updateNodeData } = useReactFlow();

  return (
    <BaseNode>
      <BaseNodeContent className="p-5">
        <Slider
          value={[data.value]}
          min={0}
          max={100}
          step={1}
          className="nopan nodrag w-24"
          onValueChange={([value]) => {
            updateNodeData(id, (node) => ({
              ...node.data,
              value,
            }));
          }}
        />
        <Handle type="source" position={Position.Bottom} />
      </BaseNodeContent>
    </BaseNode>
  );
});

CounterNode.displayName = "CounterNode";
```

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

### Old API: React Flow with elements prop

Source: https://reactflow.dev/llms-medium.txt

Old API example using the `elements` prop with `onElementsRemove` and `onConnect` handlers. This is the pre-v11 approach that is replaced by the new `nodes`/`edges` API.

```jsx
import { useState, useCallback } from 'react';
import { ReactFlow, removeElements, addEdge } from 'react-flow-renderer';

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

const BasicFlow = () => {
  const [elements, setElements] = useState(initialElements);
  const onElementsRemove = useCallback(
    (elementsToRemove) =>
      setElements((els) => removeElements(elementsToRemove, els)),
    [],
  );
  const onConnect = useCallback((connection) =>
    setElements((es) => addEdge(connection, es)),
  );

  return (
    <ReactFlow
      elements={elements}
      onElementsRemove={onElementsRemove}
      onConnect={onConnect}
    />
  );
};

export default BasicFlow;
```

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

### ButtonHandle demo with connection state

Source: https://reactflow.dev/llms-medium.txt

Example usage of ButtonHandle inside a BaseNode. It hides the button while a connection is in progress and shows an alert when the button is clicked.

```tsx
import { Plus } from "lucide-react";
import { ConnectionState, Position, useConnection } from "@xyflow/react";

import { ButtonHandle } from "@/registry/components/button-handle";
import { BaseNode, BaseNodeContent } from "@/registry/components/base-node";

import { Button } from "@/components/ui/button";

const onClick = () => {
  window.alert(`Handle button has been clicked!`);
};

const selector = (connection: ConnectionState) => {
  return connection.inProgress;
};

const ButtonHandleDemo = () => {
  const connectionInProgress = useConnection(selector);

  return (
    <BaseNode>
      <BaseNodeContent>
        Node with a handle button
        <ButtonHandle
          type="target"
          position={Position.Bottom}
          showButton={!connectionInProgress}
        >
          <Button
            onClick={onClick}
            size="sm"
            variant="secondary"
            className="rounded-full"
          >
            <Plus size={10} />
          </Button>
        </ButtonHandle>
      </BaseNodeContent>
    </BaseNode>
  );
};

export default ButtonHandleDemo;
```

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

### ButtonEdge demo component

Source: https://reactflow.dev/llms-medium.txt

Example usage of the ButtonEdge component. It wraps a Button inside ButtonEdge and triggers an alert when the button is clicked.

```tsx
import { EdgeProps } from "@xyflow/react";
import { memo } from "react";

import { Button } from "@/components/ui/button";
import { MousePointerClick } from "lucide-react";
import { ButtonEdge } from "@/registry/components/button-edge";

const ButtonEdgeDemo = memo((props: EdgeProps) => {
  const onEdgeClick = () => {
    window.alert(`Edge has been clicked!`);
  };

  return (
    <ButtonEdge {...props}>
      <Button onClick={onEdgeClick} size="icon" variant="secondary">
        <MousePointerClick size={16} />
      </Button>
    </ButtonEdge>
  );
});

ButtonEdgeDemo.displayName = "ButtonEdgeDemo";

export default ButtonEdgeDemo;
```

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

### index.css - Devtools styles

Source: https://reactflow.dev/llms-medium.txt

Styles for the React Flow devtools example. Defines layout for the full-viewport #app container and styling for devtools buttons, changelogger, node inspector, and dark mode variants.

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}

.react-flow__devtools {
  --border-radius: 4px;
  --highlight-color: rgba(238, 58, 115, 1);
  --font: monospace, sans-serif;

  border-radius: var(--border-radius);
  font-size: 11px;
  font-family: var(--font);
}

.react-flow__devtools button {
  background: white;
  border: none;
  padding: 5px 15px;
  color: #222;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  background-color: #f4f4f4;
  border-right: 1px solid #ddd;
}

.dark .react-flow__devtools button {
  background-color: #1a1a1a;
  color: #eee;
  border-right-color: #333;
}

.react-flow__devtools button:hover {
  background: var(--highlight-color);
  opacity: 0.8;
  color: white;
}

.react-flow__devtools button.active {
  background: var(--highlight-color);
  color: white;
}

.react-flow__devtools button:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.react-flow__devtools button:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-right: none;
}

.react-flow__devtools-changelogger {
  pointer-events: none;
  position: relative;
  top: 50px;
  left: 20px;
  font-family: var(--font);
}

.react-flow__devtools-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.react-flow__devtools-nodeinspector {
  pointer-events: none;
  font-family: monospace, sans-serif;
  font-size: 10px;
}

.react-flow__devtools-nodeinfo {
  top: 5px;
}

.dark .react-flow__devtools button:hover {
  opacity: 1;
}

.dark .react-flow__devtools-changelogger {
  color: #ccc;
}

.dark .react-flow__devtools-nodeinspector {
  color: #ccc;
}

.dark .react-flow__panel {
  color: #ccc;
}
```

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

### Mismatched node type and nodeTypes key causes warning

Source: https://reactflow.dev/llms-medium.txt

This example also triggers the warning because the `type` option ('custom') and the key in `nodeTypes` ('Custom') are not exactly the same. The key must match the `type` string exactly.

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

import MyCustomNode from './MyCustomNode';

const nodes = [
  {
    id: 'mycustomnode',
    type: 'custom',
    // ...
  },
];

const nodeTypes = {
  Custom: MyCustomNode,
};

function Flow(props) {
  // node.type and key in nodeTypes object are not exactly the same (capitalized)
  return <ReactFlow nodes={nodes} nodeTypes={nodeTypes} />;
}
```

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

### App.jsx - base React Flow component

Source: https://reactflow.dev/llms-medium.txt

Main App component that sets up the React Flow canvas with state hooks and a placeholder layout function. The onLayout callback is defined but not yet used; it will be replaced in the layouting examples.

```jsx
import { useCallback } from 'react';
import {
  ReactFlow,
  ReactFlowProvider,
  useNodesState,
  useEdgesState,
  useReactFlow,
} from '@xyflow/react';

import { initialNodes, initialEdges } from './nodes-edges.js';
import '@xyflow/react/dist/style.css';

const getLayoutedElements = (nodes, edges) => {
  return { nodes, edges };
};

const LayoutFlow = () => {
  const { fitView } = useReactFlow();
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onLayout = useCallback(() => {
    const layouted = getLayoutedElements(nodes, edges);

    setNodes([...layouted.nodes]);
    setEdges([...layouted.edges]);

    fitView();
  }, [nodes, edges]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      colorMode="system"
    />
  );
};

export default function () {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  );
}
```

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

### Example index.css with fullscreen styles

Source: https://reactflow.dev/llms-full.txt

CSS for the example that sets the #app container to full viewport size and also includes the fullscreen rules for html, body, and #root.

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

html,
body,
#root {
  height: 100%;
}
```

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

### useNodesData hook example

Source: https://reactflow.dev/llms-full.txt

Subscribes to changes of a specific node's data object. The example shows how to get data for a single node and for multiple nodes by passing an array of node IDs.

```jsx
import { useNodesData } from '@xyflow/react';

export default function () {
  const nodeData = useNodesData('nodeId-1');

  const nodesData = useNodesData(['nodeId-1', 'nodeId-2']);
}
```

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

### Install Placeholder Node with bun x

Source: https://reactflow.dev/ui/components/placeholder-node

Install the Placeholder Node component using the bun x command.

```bash
bun x shadcn@latest add https://ui.reactflow.dev/placeholder-node
```

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

### Initialize shadcn/ui with npx shadcn@latest init

Source: https://reactflow.dev/llms-full.txt

Run the shadcn/ui CLI to initialize the project. The command detects the framework (Vite) and Tailwind version (v4), prompts for a base color, and generates components.json and src/lib/utils.ts. The output shows the expected success messages.

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

```text
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating CSS variables in src/index.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.
```

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

### useReactFlow() hook example

Source: https://reactflow.dev/api-reference/hooks/use-react-flow

Example component using useReactFlow to get the ReactFlowInstance and count nodes on button click. Note that reactFlow must be included as a dependency in useCallback or useEffect because it is not initialized on the first render.

```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>
  );
}
```

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

### Complete store.js with dummy nodes

Source: https://reactflow.dev/llms-full.txt

Final store.js with dummy nodes included for the tutorial example. Demonstrates the complete store with initial nodes, edges, and actions.

```js
import { applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
import { nanoid } from 'nanoid';
import { createWithEqualityFn } from 'zustand/traditional';

export const useStore = createWithEqualityFn((set, get) => ({
  nodes: [
    { id: 'a', data: { label: 'oscillator' }, position: { x: 0, y: 0 } },
    { id: 'b', data: { label: 'gain' }, position: { x: 50, y: 100 } },
    { id: 'c', data: { label: 'output' }, position: { x: -50, y: 200 } },
  ],
  edges: [],

  onNodesChange(changes) {
    set({
      nodes: applyNodeChanges(changes, get().nodes),
    });
  },

  onEdgesChange(changes) {
    set({
      edges: applyEdgeChanges(changes, get().edges),
    });
  },

  addEdge(data) {
    const id = nanoid(6);
    const edge = { id, ...data };

    set({ edges: [edge, ...get().edges] });
  },
}));
```

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

### useNodeConnections hook example

Source: https://reactflow.dev/api-reference/hooks/use-node-connections

Use this hook to get an array of connections for a specific node, filtered by handle type and handle ID. The example shows how to count incoming connections for a handle with ID 'my-handle'.

```jsx
import { useNodeConnections } from '@xyflow/react';
 
export default function () {
  const connections = useNodeConnections({
    handleType: 'target',
    handleId: 'my-handle',
  });
 
  return (
    <div>There are currently {connections.length} incoming connections!</div>
  );
}
```

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

### Define initial nodes and edges

Source: https://reactflow.dev/learn/concepts/adding-interactivity

Defines the initial nodes and edges for the flow, serving as the starting point for the interactive example.

```javascript
const initialNodes = [
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
];
 
const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
  },
];
```

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

### Install BaseNode with bun

Source: https://reactflow.dev/ui/components/base-node

Install the BaseNode component using bun and the shadcn CLI.

```bash
bun x shadcn@latest add https://ui.reactflow.dev/base-node
```

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

### React Flow basic setup (index.jsx, index.html, index.css, App.jsx)

Source: https://reactflow.dev/llms-full.txt

Initial React Flow setup: index.jsx mounts the app, index.html provides the root element, index.css sets full-screen layout, and App.jsx renders the ReactFlow component with a provider, background, and store-driven nodes/edges.

```jsx
import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);
```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Flow Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>
```

```css
html,
body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

```jsx
import React from 'react';
import { ReactFlow, ReactFlowProvider, Background } from '@xyflow/react';
import { shallow } from 'zustand/shallow';

import { useStore } from './store';

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

const selector = (store) => ({
  nodes: store.nodes,
  edges: store.edges,
  onNodesChange: store.onNodesChange,
  onEdgesChange: store.onEdgesChange,
  addEdge: store.addEdge,
});

export default function App() {
  const store = useStore(selector, shallow);

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

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

### useNodeId hook example

Source: https://reactflow.dev/llms-full.txt

Gets the id of the node it is used inside, useful for avoiding prop drilling. The example shows a custom node component that uses a child component to display the node's id. This hook should only be used within a custom node or its children.

```js
import { useNodeId } from '@xyflow/react';

export default function CustomNode() {
  return (
    <div>
      <span>This node has an id of </span>
      <NodeIdDisplay />
    </div>
  );
}

function NodeIdDisplay() {
  const nodeId = useNodeId();

  return <span>{nodeId}</span>;
}
```
Tokens:
Raw