📣 Take the 2024 React Flow Developer Survey
LearnQuickstart

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:

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:

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

Installation

To get started locally you should have a few things:

  • Node.js installed.
  • Either npm or another package manager like yarn or pnpm.
  • A working knowledge of React. You don’t need to be an expert, but you should be comfortable with the basics.

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

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

React Flow is published on npm as @xyflow/react, so go ahead and add it next.

npm install @xyflow/react

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

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
Tutorials