Documentation

Everything developers need to get started.

Install the library, render your first flow and dive into the full API.

Getting Started Updated

Reference

Configuration

Guides

bash

npm install @xyflow/react

Getting Started Updated

Add VisualFlow and React Flow to a React 18+ project with npm, pnpm, yarn or bun.

Render an interactive, editable flow in under five minutes.

Every prop accepted by the ReactFlow component, grouped by purpose.

Background, Controls, MiniMap, Panel, NodeToolbar and NodeResizer.

useReactFlow, useNodesState, useStore, useOnSelectionChange and more.

All node fields: position, data, type, parentId, extent, draggable and more.

Edge types, markers, labels, animation and interaction width.

Theme with CSS variables, Tailwind or styled-components.

Copy-pasteable patterns for drag-and-drop, sub-flows, layouting and more.

Fixes for blank canvases, missing styles, re-render warnings and SSR errors.