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

> An open-source library for building node-based editors, workflow builders, and interactive diagrams with React or Svelte.

## Install

Save as a script file and run:

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

## Quick Use
```bash
npm install @xyflow/react
```
```jsx
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const nodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } }];
const edges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  return <ReactFlow nodes={nodes} edges={edges} />;
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-0f7f9e27
Author: Script Depot