🔥 React Flow 12 is here! SSR, dark mode, computing flows, and more
Learn
Quickstart

Quickstart

If you want to get up-and-running as soon as possible you're in the right place! This page will take you from zero to a working React Flow app in a few minutes. From there, you can take a deeper look at what React Flow is all about, check out the examples, or dive into the API docs.

React Flow in 60 seconds

Play online

You can try React Flow without setting anything up locally by checking out the starter projects we have on CodeSandbox (opens in a new tab):

JS
new.reactflow.dev/js
TS
new.reactflow.dev/ts

Vite template

If you want to get started right away, you can use our vite template (opens in a new tab):

npx degit xyflow/vite-react-flow-template app-name

Installation

To get started locally you should have a few things:

First, spin up a new React (opens in a new tab) project however you like; we recommend using Vite (opens in a new tab) but the choice is yours.

npm create vite@latest my-react-flow-app -- --template react

React Flow is published on npm as @xyflow/react (opens in a new tab), so go ahead and add it next.

npm install @xyflow/react

Lastly, spin up the dev server and we're good to go!

npm run dev

Creating your first flow

The reactflow package exports the <ReactFlow /> component as the default export. That and a handful of nodes and edges are all we need to get something going! Get rid of everything inside App.jsx and add the following:

import React from 'react';
import { ReactFlow } from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}

There are a few things to pay attention to here:

  • You must import the React Flow stylesheet.
  • The <ReactFlow /> component must be wrapped in an element with a width and height.

Adding interactivity

Graphs created with React Flow are fully interactive. We can move nodes around, connect them together, delete them, ... To get the basic functionality we need to add three things:

Fortunately for you, we provide some hooks to make this easy!

import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
}

Some extra goodies

Finally, React Flow ships with some plugins out of the box for things like a <Minimap /> or viewport <Controls />.

import React, { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

Et voila. You've already created your first interactive flow! Check out the links below on where to head next.

Next Steps

ConceptsCustomizationExamplesAPI ReferenceDiscordTemplate Projects
Introduction