Learn

Learn to build with React Flow.

A structured path from your first canvas to production-grade visual editors.

Getting Started with react flow

Start here: install React Flow and render your first canvas.

Install React Flow, render your first canvas, and understand the minimum setup every flow needs.

Nodes, edges, handles, the viewport and interaction model.

Nodes, edges, handles and the viewport — the four primitives behind every diagram.

Shape, position and connect elements, and react to changes as users edit the graph.

Selection, drag-to-connect, keyboard shortcuts and context menus that feel native.

Custom nodes, custom edges and theming.

Turn any React component into a node with handles, inputs and live state.

Draw your own paths, add labels and buttons, and animate data flowing between nodes.

Automatic layout with dagre, ELK and tree layouts.

Arrange large graphs automatically with dagre or ELK and keep them readable.

State management, performance, subflows and validation.

Keep flows predictable with Zustand, undo/redo and server persistence.

Sub-flows, performance tuning for thousands of nodes and computing values across a graph.

End-to-end builds: workflow builders, AI agent canvases and more.

End-to-end builds: an automation builder, an AI agent canvas and a schema designer.