Building a Flow
In the following pages we will introduce you to the core concepts of React Flow and explain how to create a basic interactive flow. A flow consists of nodes, edges and the viewport. If you haven’t reviewed our Key Concepts yet, we recommend doing that first.
To follow along with this guide you will need to have a React project set up and install
the @xyflow/react package:
npm install @xyflow/reactCreating the flow
Let’s start by creating an empty flow with viewport
<Controls /> and a dotted
<Background />.
Add imports
First, import the React Flow Component and its required styles into your
project. We’ll also import the Background component for visual enhancement,
and the Controls component for the viewport controls.
import { ReactFlow, Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';Render ReactFlow
Now we create a React component, that renders our flow. The width and height
on the parent container are required because React Flow uses these
dimensions. We can place the <Background/>
and <Controls/> components inside ReactFlow.
Content inside ReactFlow stays fixed on top of the viewport. The Background
component transforms its pattern to match viewport movement.
Adding nodes
Now that the flow is set up, it’s time to add nodes — each node represents an element in your diagram with a specific position and content.
Create node objects
Outside of your React component, create an array of node objects with these required properties:
id: A unique identifier for each nodeposition: The x and y coordinatesdata: An object for storing custom data
We can set the type of the first node to input and the second node to
output. These are built-in node types, that come with a different set of
handles. This is optional, but it means that the first node will only have a
source handle and the second node will only have a target handle.
const initialNodes = [
{
id: 'n1',
position: { x: 0, y: 0
We have several built-in nodes that you can explore in the node reference. However, once you start building your own application, you will want to use custom nodes.
Adding edges
Now that we have two nodes, let’s connect them with an edge.
Create edge objects
To create an edge, we define an array of edge objects.
Each edge object needs to have an id, a source (where the edge begins), and
a target (where it ends). In this example, we use the id values of the two
nodes we created so far (n1 and n2) to define the edge:
const initialEdges = [
{
id: 'n1-n2',
source: 'n1',
target: 'n2',
},
];This edge connects the node with id: 'n1' (the source) to the node with (the
target).
Full code example 🏁
The completed flow will look like this:
You took your first steps in React Flow! You might have realized that you can’t drag or otherwise interact with nodes. On the next page you’ll learn how to make the flow interactive.