Building a Flow

Add imports

First, we need to import some basic components from the @xyflow/react package and the css stylesheet, which is required for React Flow to work:

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.

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 🎉

Create node objects

Outside of your React component, create an array of node objects. Each node object needs a unique id and a position. Let’s also add a label to them:

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' },
  },
];

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 an edge

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).

Label the edge

Let’s give this edge two properties that are built into React Flow, a label and a type: "step".

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

Basic flow

Now we have completed a basic flow with nodes and edges! 🎉