Feature-complete and crafted by the core team
Step-by-step instructions on how each example works
Subscribers are the first to get new pro examples and refactors
Download the pro examples and use them anywhere, anytime
![Shapes Example Preview](/_next/image?url=%2Fimg%2Fpro%2Fhelper-lines-pro-example.jpg&w=3840&q=75)
![Auto Layout screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fauto-layout%2Fthumbnail.jpg&w=3840&q=75)
Automatically arrange your nodes after adding items to your flow.
![Collaborative screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fcollaborative%2Fthumbnail.jpg&w=3840&q=75)
A collaborative flow for multiple users based on yjs.
![Copy and Paste screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fcopy-paste%2Fthumbnail.jpg&w=3840&q=75)
Copy and paste a selection of nodes in a flow.
![Dynamic Grouping screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fdynamic-grouping%2Fthumbnail.jpg&w=3840&q=75)
Group nodes together by dragging them into the same container.
![Editable Edge screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Feditable-edge%2Fthumbnail.jpg&w=3840&q=75)
Drag control points to change an edge path.
![Expand and Collapse screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fexpand-collapse%2Fthumbnail.jpg&w=3840&q=75)
Click on parent nodes to toggle the visibility of their children.
![Force Layout screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fforce-layout%2Fthumbnail.jpg&w=3840&q=75)
Newly added nodes never overlap with existing nodes using d3-force.
![Helper Lines screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fhelper-lines%2Fthumbnail.jpg&w=3840&q=75)
Snap nodes along the same axis with helper lines.
![Shapes screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fshapes%2Fthumbnail.jpg&w=3840&q=75)
Custom nodes in various shapes commonly used in flowcharts.
![Static Server Side Generation screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fstatic-server-side-generation%2Fthumbnail.jpg&w=3840&q=75)
A tiny app that shows how to use React Flow to statically generate a flow.
![Undo and Redo screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fundo-redo%2Fthumbnail.jpg&w=3840&q=75)
Undo and redo for adding, deleting, connecting, and positioning nodes and edges.
![Workflow Builder screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fworkflow-builder%2Fthumbnail.jpg&w=3840&q=75)
Add and auto-layout new nodes in a vertical tree flow.
Get Started
Boost your apps with React Flow Pro
Get all 10 pro examples with just one month of a Pro subscription from 129€
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