React Flow — Build Interactive Node-Based UIs for React and Svelte

Introduction

React Flow provides a robust foundation for building interactive node-based interfaces in web applications. Whether you need a visual workflow editor, a data pipeline builder, or a mind-mapping tool, React Flow handles pan, zoom, drag, selection, and edge rendering out of the box. It also ships a Svelte version under the name Svelte Flow.

What React Flow Does

• Renders draggable nodes and connectable edges on an infinite canvas
• Supports custom node and edge types with full React component rendering
• Provides built-in controls for zoom, pan, minimap, and background patterns
• Handles selection, multi-select, copy-paste, and undo-redo interactions
• Offers sub-flows, nested nodes, and grouping for complex layouts

Architecture Overview

React Flow uses an internal store powered by Zustand to manage node positions, edge connections, viewport state, and selection. The rendering layer draws nodes as positioned HTML elements and edges as SVG paths, combining DOM and SVG for flexibility. Layout calculations run outside React's reconciliation cycle for performance. Plugins like MiniMap, Controls, and Background are opt-in React components.

Installation & Configuration

• Install via npm, pnpm, or yarn: npm install @xyflow/react
• Import the base CSS file for default styling
• Wrap your flow in a parent element with explicit width and height
• Use the onNodesChange and onEdgesChange callbacks for controlled state
• Configure fit-view, snap-to-grid, and connection validation via props

Key Features

• Sub-flow support for nested, hierarchical diagrams
• Minimap and controls plugins included out of the box
• TypeScript-first API with full generic support for node and edge data
• Server-side rendering compatible with Next.js and Remix
• Svelte Flow variant for Svelte-based projects

Comparison with Similar Tools

• JointJS — full-featured but heavier; commercial license for advanced shapes
• Cytoscape.js — graph-theory focused; better for network analysis than UI editing
• GoJS — commercial diagramming library with more built-in shapes but proprietary
• Drawflow — lighter weight and vanilla JS; fewer interaction features
• Rete.js — node editor framework; steeper learning curve and smaller community

FAQ

Q: Can I use React Flow for free in commercial projects? A: Yes. React Flow is MIT-licensed. A paid Pro subscription adds extra features and prioritized support.

Q: Does React Flow support touch devices? A: Yes. Touch-based panning, zooming, and node dragging work on mobile and tablet browsers.

Q: How do I add custom node content? A: Define a React component and register it via the nodeTypes prop. Each custom node receives data as a prop.

Q: Can I export the diagram as an image? A: React Flow does not include built-in export, but you can use html-to-image or dom-to-image libraries on the viewport container.

Sources

• https://github.com/xyflow/xyflow
• https://reactflow.dev/docs