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
Play online
You can try React Flow without setting anything up locally by checking out the starter projects we have on CodeSandbox :
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
Lastly, 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 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:
Important
If you are using Tailwind CSS 4, you need to import the main React Flow CSS stylesheet
after you import the tailwindcss stylesheet. To ensure the styles are loaded in the
correct order, you should always import the styles in your global.css file (or
index.css file), after you import tailwindcss. Avoid importing the styles in your
App.tsx file or any other file that is imported by your App.tsx file.
Read more.
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. You’ve already created your first interactive flow! 🎉
Next steps