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
First, spin up a new React project however you like — we recommend using Vite
npm init vite my-react-flow-app -- --template reactNext cd into your new project folder and add
@xyflow/react as a dependency
npm install @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 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:
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!