Quick Start

This page will take you from zero to a working React Flow app in a few minutes. If you just want to have a look around and get an impression of React Flow, check out our interactive no-code Playground.

Installation

To install React Flow in your existing React project, run the following command:

npm install @xyflow/react

pnpm add @xyflow/react

yarn add @xyflow/react

bun add @xyflow/react

Templates

If you want to get started right away, you can use a template.

React Flow Vite template

We have a ready-to-use Vite template that you can use to get up and running in no time.

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

pnpm dlx degit xyflow/vite-react-flow-template app-name

yarn dlx degit xyflow/vite-react-flow-template app-name

bun x degit xyflow/vite-react-flow-template app-name

Vite template with React

To create a new React Flow project from scratch, first, spin up a new React project however you like we recommend using Vite

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

pnpm create vite my-react-flow-app --template react

yarn create vite my-react-flow-app --template react

bunx create-vite my-react-flow-app --template react

Next cd into your new project folder and add @xyflow/react as a dependency

npm install @xyflow/react

pnpm add @xyflow/react

yarn add @xyflow/react

bun add @xyflow/react

Lastly, spin up the dev server and youre good to go!

Usage

We will render the <ReactFlow /> component from the @xyflow/react package. That and defining a handful of node objects, edge objects and event handlers are all we need to get something going! Get rid of everything inside App.jsx and add the following:

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
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
      />
    </div>
  );
}

There are two things to pay attention to here:

• You must import the css stylesheet for React Flow to work.
• The <ReactFlow /> component must have a parent element with a width and height.

Result

Et voila. Youve already created your first interactive flow!

Next steps