Building a Flow

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.

export default function App() {
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

Empty flow

That’s it! You have created your first empty flow 🎉

If everything is set up correctly, you should see a blank canvas like this:

Create node objects

Outside of your React component, create an array of node objects with these required properties:

• id: A unique identifier for each node
• position: The x and y coordinates
• data: 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 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
    type: 'output',
  },
];

Add nodes to the flow

Now we can pass our initialNodes array to the <ReactFlow /> component using the nodes prop:

<ReactFlow nodes={initialNodes}>
  <Background />
  <Controls />
</ReactFlow>

Flow with nodes

This gives us a flow with two labeled nodes 🎉

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 id: 'n2' (the target).

Add edges to the flow

Now we can pass our initialEdges array to the <ReactFlow /> component using the edges prop:

<ReactFlow nodes={initialNodes} edges={initialEdges}>
  <Background />
  <Controls />
</ReactFlow>

Your flow should now look like this:

Edge label and type

By default, React Flow allows you to add text labels to edges that will float in the middle of the edge via the label property. Also, many types of edges are built in, such as smoothstep and step. We can change the type of the edge by setting the type property.

const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
    type: 'smoothstep',
    label: 'connects with',
  },
];

Done! 🎉

Congratulations! You have completed a basic flow with nodes and edges! 🎉