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/reactTemplates
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-nameVite 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 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
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!