Building a Flow

Beginner · 1 min read · Updated Nov 5, 2026

Learn how to build interactive flow diagrams using React Flow. Create a visual canvas, add nodes and edges, customize connections, and develop interactive workflow editors with React.

Getting Started with React Flow

Start by installing @xyflow/react in your React project. React Flow provides the essential components and tools to create interactive node-based applications.

Creating Your First Flow

Initialize a React Flow canvas using the component. Add built-in and components to enhance the canvas with a grid background and viewport controls.

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

const nodes = [
  {
    id: '1',
    position: { x: 100, y: 100 },
    data: { label: 'Start Node' },
  },
  {
    id: '2',
    position: { x: 300, y: 200 },
    data: { label: 'End Node' },
  },
];

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

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow nodes={nodes} edges={edges} fitView />
    </div>
  );
}

Adding Nodes to a Flow

Nodes are the fundamental elements of a React Flow diagram. Define nodes with unique IDs, positions, and data to display content and organize your visual workflow.

const nodes = [
  {
    id: '1',
    position: { x: 100, y: 50 },
    data: { label: 'Input Node' },
  },
  {
    id: '2',
    position: { x: 300, y: 150 },
    data: { label: 'Process Node' },
  },
  {
    id: '3',
    position: { x: 500, y: 250 },
    data: { label: 'Output Node' },
  },
];

<ReactFlow nodes={nodes} edges={[]} fitView />;

Connecting Nodes with Edges

Edges connect nodes to represent relationships and workflow logic. Define edges using source and target node IDs to create connections between elements in your flow.

React Flow also supports customizable edge types, labels, and connection styles for building advanced workflow diagrams.

import { useCallback } from 'react';
import { ReactFlow, addEdge, useEdgesState } from '@xyflow/react';

const initialEdges = [];

export default function App() {
  const [edges, setEdges, onEdgesChange] =
    useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    />
  );
}

Customizing Edge Types and Labels

Enhance your flow with built-in edge types such as Smoothstep and Step. Add labels to edges to describe connections, communicate relationships, and improve diagram readability.

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'smoothstep',
    label: 'Next Step',
    animated: true,
    style: {
      stroke: '#6366f1',
      strokeWidth: 2,
    },
  },
  {
    id: 'e2-3',
    source: '2',
    target: '3',
    type: 'step',
    label: 'Success',
  },
];

<ReactFlow nodes={nodes} edges={edges} fitView />;

Adding Interactivity to React Flow

Make your flow interactive by enabling node dragging, edge connections, element selection, and deletion. Use React state and event handlers to manage changes dynamically.

With onNodesChange, onEdgesChange, and onConnect, you can build responsive and fully interactive workflow editors.

import { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';

const initialNodes = [
  {
    id: '1',
    position: { x: 100, y: 100 },
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 300, y: 200 },
    data: { label: 'Node 2' },
  },
];

const initialEdges = [];

export default function App() {
  const [nodes, setNodes, onNodesChange] =
    useNodesState(initialNodes);

  const [edges, setEdges, onEdgesChange] =
    useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
  );
}

Building Interactive Workflows with VisualFlow

VisualFlow helps developers build React Flow applications faster with customizable workflow templates, reusable components, and interactive visual editor examples.

Add edges to the flowOpen in New Tab

Previous← Hooks and Providers Next guideNodes →