Skip to Content

React Flow

Learn Reference Examples UI ShowcasePro Remove Attribution

Learn
Reference
Examples
UI
Showcase

- Introduction
- - AI Workflow Editor
  - Workflow Editor
- - Node Utilities
  - Base Node
  - Status Indicator
  - Appendix
  - Tooltip
  - Custom Nodes
  - Database Schema
  - Placeholder
  - Labeled Group
  - Handles
  - Base Handle
  - Labeled Handle
  - Button Handle
  - Custom Edges
  - Edge with Button
  - Edge with Node Data
  - Animated SVG Edge
  - Controls
  - Node Search
  - Zoom Slider
  - Zoom Select
  - Misc
  - DevTools
- Request a Component
Showcase
Pro
Remove Attribution

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Docs

Getting Started API Reference Examples UI Showcase Playground

Social

Discord Github X / Twitter Bluesky

xyflow

Blog Open Source About Contact Careers

Legal

MIT License Code of Conduct Imprint

info@xyflow.com — Copyright © 2026 webkid GmbH. All rights reserved — website design by Facu Montanaro

Upgrade your apps with React Flow Pro Content

Get advanced React Flow examples and templates to use in your node-based UIs, crafted by the React Flow core team.

Overview of the pro example apps

Overview of the pro example apps

By the creators of React Flow

Feature-complete and crafted by the core team

Downloadable Vite apps and guides

Step-by-step instructions on how each example works

Regularly Added and Updated

Subscribers are the first to get new pro content and refactors

Subscribe for one, use them forever

Download the pro examples and templates and use them anywhere

React Flow Pro Examples

These are our pro examples that you can use in your projects.

Auto Layout screenshot

Auto Layout screenshot

Automatically arrange nodes using various layout engines like dagre, d3-hierarchy, or elkjs

Collaborative screenshot

Collaborative screenshot

Build a collaborative graph for multiple users with React Flow and yjs

React Flow Pro Templates

Pro templates that you can use in your projects.

Workflow Editor Template screenshot

Workflow Editor Template screenshot

Workflow Editor Template

A Next.js-based application designed to help you quickly create, manage, and visualize workflows.

AI Workflow Template screenshot

AI Workflow Template screenshot

Get Started

Boost your apps with React Flow Pro

Get full access to all pro examples with just one month with a Pro subscription — from €129.

Try it out See subscription plans

Are you a student, educator, or open source developer?

Get all of these Pro examples for free

For education purposes

Email us at info@xyflow.com using your university email address

For non-commercial open source projects

Contact us with the link to the GitHub or GitLab repository

Copy and Paste screenshot

Copy and Paste screenshot

Select nodes and edges to cut, copy, and paste

Dynamic Layouting screenshot

Dynamic Layouting screenshot

Dynamic Layouting

A self-organizing graph where users add nodes by clicking placeholder elements, and nodes position automatically.

Edge Routing screenshot

Edge Routing screenshot

Implement a routable edge with libavoid

Editable Edge screenshot

Editable Edge screenshot

Implement a custom edge with draggable control points to change the path of an edge

Expand and Collapse screenshot

Expand and Collapse screenshot

Expand and Collapse

Create hierarchical trees with expandable and collapsible nodes using dagre for automatic layouts

Force Layout screenshot

Force Layout screenshot

Newly added nodes never overlap with existing nodes using d3-force

Freehand Draw screenshot

Freehand Draw screenshot

Freehand drawing on the canvas.

Helper Lines screenshot

Helper Lines screenshot

Display lines that help to visually align nodes, with automatic snapping for precise positioning and layout control.

Node Position Animation screenshot

Node Position Animation screenshot

Node Position Animation

Animate smooth transitions between different graph layouts with interactive controls

Parent Child Relation screenshot

Parent Child Relation screenshot

Parent Child Relation

Dynamically attach and detach nodes from parent containers with drag and drop functionality

Selection Grouping screenshot

Selection Grouping screenshot

Selection Grouping

This example demonstrates how to create dynamic node grouping in React Flow.

Server Side Image Creation screenshot

Server Side Image Creation screenshot

Server Side Image Creation

Generate static images of React Flow graphs on the server with Puppeteer

Shapes screenshot

Shapes screenshot

Render Custom Nodes with different shapes that are commonly used in flow charts

Undo and Redo screenshot

Undo and Redo screenshot

Undo and redo functionality for moving, adding, and deleting nodes and edges

AI Workflow Template

The AI Workflow Editor template is a Next.js app for getting started quickly with an AI workflow app.

Demo

Sign Upto get a free pro example

Pro Examples - React Flow