Quick Start
This page will take you from zero to a working React Flow app in a few minutes. If youjust want to have a look around and get an impression of React Flow, check out ourinteractive no-codePlayground .
Installation
First, spin up a new React project however you like — we recommend usingVite
npm init vite my-react-flow-app -- --template reactpnpm create vite my-react-flow-app --template reactyarn create vite my-react-flow-app --template reactbunx create-vite my-react-flow-app --template reactNextcd into your new project folder and add@xyflow/react as a dependency
npm install @xyflow/reactpnpm add @xyflow/reactyarn add @xyflow/reactbun add @xyflow/reactLastly, spin up the dev server and you’re good to go!
Usage
We will render the<ReactFlow /> component from the@xyflow/react package. That and defining a handful ofnodeobjects,edge objects andevent handlers are all we need to getsomething going! Get rid of everything insideApp.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 awidth and height.
Result
Et voila. You’ve already created your first interactive flow!