Building a Flow

In this section, we’ll introduce you to the basics of React Flow and guide you through creating your first flow.

Getting Started

Let’s start by creating an empty flow with a controls panel and a background. First, we need to import some basic components from the @xyflow/react package:


import { ReactFlow, Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

We can now use these components to render an empty flow. There are three important things to keep in mind here:

Don’t forget to import the stylesheet. Otherwise, React Flow won’t work.
The parent container needs a width and a height because React Flow uses its parent dimensions.
If you have multiple flows on one page, you need to pass a unique id prop to each component to make React Flow work properly.


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

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 an array of node objects like this:


const nodes = [
  {
    id: '1', // required
    position: { x: 0, y: 0 }, // required
    data: { label: 'Hello' }, // required
  },
];

Then we can add our first node to the flow like this:


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

Let’s add another node, and apply the node type input to the first node. React Flow uses different node types to indicate their roles. An input node—designated by the type input—typically serves as the entry point to your flow.


const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
    type: 'input',
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'World' },
  },
];


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

There are many ways to configure nodes in React Flow. We have several built-in options that you can explore in the node documentation. However, when it comes to customizing nodes, the possibilities are endless. For more details, check out our guide on customizing nodes.

Adding an Edge

Now that we have two nodes, let’s connect them with an edge.

To create an edge, we define a unique edge id and specify two attributes: the source (where the edge begins) and the target (where it ends). In this example, we use the id values of the two nodes we created so far—“1” and “2”—to define the edge:


const edges = [{ id: '1-2', source: '1', target: '2' }];

This edge connects the node with id “1” (the source) to the node with id “2” (the target).


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const edges = [{ id: '1-2', source: '1', target: '2' }];
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

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


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const edges = [
  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
];
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

You made your first edge, nice work! You might have realized that you can’t drag or select nodes. In the next part you’ll learn how to make the flow interactive.