Xyflow — Interactive Node-Based UIs for React and Svelte

Introduction

Xyflow is the library behind React Flow and Svelte Flow. It provides a performant canvas for building node-based editors, workflow builders, and interactive diagrams. Nodes and edges are fully customizable React or Svelte components.

What Xyflow Does

• Renders draggable, connectable nodes on a pannable and zoomable canvas
• Manages edge connections between node handles with built-in validation
• Supports custom node and edge components for domain-specific UIs
• Provides sub-flows, grouping, and nested graphs
• Handles keyboard shortcuts, multi-selection, and copy-paste out of the box

Architecture Overview

Xyflow maintains an internal store of nodes and edges that drives a viewport rendered on a combination of HTML and SVG layers. The HTML layer holds node elements for interactivity, while the SVG layer draws edges and connection lines. Pan and zoom are handled via CSS transforms for smooth 60fps rendering even with hundreds of nodes.

Self-Hosting & Configuration

• Install @xyflow/react for React or @xyflow/svelte for Svelte
• Import the base stylesheet or provide your own CSS overrides
• Pass nodes and edges arrays along with change handlers for controlled state
• Use the useNodesState and useEdgesState hooks for quick prototyping
• Register custom node types via the nodeTypes prop

Key Features

• Fully customizable nodes and edges as standard React/Svelte components
• Built-in minimap, controls, and background pattern components
• Touch-device support with pinch-to-zoom
• Controlled and uncontrolled state management modes
• Plugin ecosystem for auto-layout, undo-redo, and more

Comparison with Similar Tools

• JointJS — full diagramming library with its own rendering; Xyflow uses native React/Svelte components
• Mermaid — text-to-diagram for static charts; Xyflow builds interactive, editable graphs
• D3.js — low-level SVG manipulation; Xyflow provides a higher-level node-graph abstraction
• Cytoscape.js — graph theory and analysis focused; Xyflow focuses on UI editing and workflow building

FAQ

Q: Is React Flow the same as Xyflow? A: React Flow is the React binding within the Xyflow monorepo. The project rebranded to Xyflow to support multiple frameworks.

Q: Can I use it for production workflow editors? A: Yes. Many companies use it for pipeline builders, state machine editors, and visual programming tools.

Q: Is it free for commercial use? A: The core library is MIT-licensed. A paid Pro subscription offers additional components and prioritized support.

Q: How does it handle large graphs? A: It virtualizes off-screen nodes and supports Web Worker-based layout computation for large datasets.

Sources

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