React Flow

LearnLearnReferenceReferenceExamplesExamples
GitHub (opens in a new tab)React Flow Pro
  • Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Hidden
    • Drag Handle
    • Easy Connect
    • Add Node On Edge Drop
    • Proximity Connect
    • Node Resizer
    • Node Toolbar
    • Resize and Rotate
    • Dynamic Grouping
    • Intersections
    • Shapes
    • Connection Limit
    • Delete Middle Node
    • Custom Edges
    • Edge Types
    • Updatable Edge
    • Connection Line
    • Edge Markers
    • Delete Edge on Drop
    • Floating Edges
    • Simple Floating Edges
    • Edge Label Renderer
    • Sub Flow
    • Horizontal Flow
    • Dagre Tree
    • Elkjs Tree
    • Auto Layout
    • Force Layout
    • Expand and Collapse
    • Workflow Builder
    • Interaction Props
    • Drag and Drop
    • Validation
    • Preventing Cycles
    • Undo and Redo
    • Copy and Paste
    • Helper Lines
    • Touch Device
    • Save and Restore
    • Collision Detection
    • Zoom Transitions
    • Collaborative
    • Contextual Zoom
    • Context Menu
    • Styled Components
    • Tailwind
    • Turbo Flow
    • Base Style
    • Download Image
    • ReactFlowProvider
    • useReactFlow
Examples
Interaction
Collaborative

Collaborative

Pro

This example shows how to build a collaborative graph for multiple users with React Flow and yjs (opens in a new tab). The changes made in this graph are visible for all users on this page. To see it working, you can open this page in another tab or on another device or browser. The example can be used as a starting point to build multi user flows and editors.

This is a Pro example. Get all pro examples, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.

See Pricing PlansSign In

About this Pro Example

  • Dependencies: reactflow (opens in a new tab), yjs (opens in a new tab)
Zoom TransitionsContextual Zoom

A project by the xyflow team

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

React Flow

Quickstart GuideAPI ReferenceExamplesShowcaseCase StudiesReact Flow Pro

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of ConductImprint

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