# Table of Contents

- [Quick Start - React Flow](#quick-start-react-flow)

---

# Quick Start - React Flow

[Skip to Content](https://reactflow.dev/learn#nextra-skip-nav)

[🚨 New Example: Handling Node Collisions!](https://reactflow.dev/examples/layout/node-collisions)

LearnQuick Start

Copy page

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](https://play.reactflow.dev/)
 .

Installation[](https://reactflow.dev/learn#installation)

---------------------------------------------------------

First, spin up a new React project however you like — we recommend using [Vite](https://vitejs.dev/)
 

npmpnpmyarnbun

`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`](https://npmjs.com/package/@xyflow/react)
 as a dependency

npmpnpmyarnbun

`npm install @xyflow/react`

`pnpm add @xyflow/react`

`yarn add @xyflow/react`

`bun add @xyflow/react`

Lastly, spin up the dev server and you’re good to go!

Usage[](https://reactflow.dev/learn#usage)

-------------------------------------------

We will render the [`<ReactFlow />`](https://reactflow.dev/api-reference/react-flow)
 component from the `@xyflow/react` package. That and defining a handful of [node](https://reactflow.dev/api-reference/types/node)
 objects, [edge](https://reactflow.dev/api-reference/types/edge)
 objects and [event handlers](https://reactflow.dev/api-reference/react-flow#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[](https://reactflow.dev/learn#result)

---------------------------------------------

Et voila. You’ve already created your first interactive flow! 🎉

Next steps[](https://reactflow.dev/learn#next-steps)

-----------------------------------------------------

[Core Concepts](https://reactflow.dev/learn/concepts/terms-and-definitions)
[Customization](https://reactflow.dev/learn/customization/custom-nodes)
[Examples](https://reactflow.dev/examples)
[API Reference](https://reactflow.dev/api-reference)
[Discord](https://discord.gg/RVmnytFmGW)
[Template Projects](https://github.com/xyflow/react-flow-example-apps)

Last updated on December 1, 2025

[Overview](https://reactflow.dev/learn/concepts/terms-and-definitions "Overview")

---