We’ve released a new integration for React Flow, enabling realtime collaboration in workflows, flowcharts, and node-based apps in just a few lines of code.
Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.
Today, we’re introducing a new SDK for React Flow that allows you to build realtime multiplayer flowcharts in just a few lines of code, enabling collaboration between humans and agents. It also enables powerful collaborative features like live cursors, multiplayer undo/redo, and pinned comment threads.
React Flow is a customizable React component for building node-based editors, workflows, and interactive diagrams. Our new integration stores your flowchart state and synchronizes it between users in realtime, allowing you to build new collaborative apps, or add multiplayer to your existing ones.
To get started, connect to a multiplayer Liveblocks room, import
useLiveblocksFlow,
and pass its properties to the ReactFlow component. Additionally, you can
render live presence cursors for each user by importing
Cursors.
Your flowchart can start with an initial set of shapes and connections, which is
set by passing nodes and edges to useLiveblocksFlow as the first argument.
Learn more in our React Flow documentation.
You can define custom nodes in your React Flow app like normal, and data will
be automatically synchronized between users. However, you may wish for some
properties to be kept local and singleplayer. An example would be a
showPreview property, which might be used to toggle some kind of preview UI
inside a node.
To make a property like showPreview singleplayer only, add it to the sync
object, and set it to false.
Find more information on custom nodes and local properties.
React Flow is powered by Liveblocks Storage under the hood, our battle-tested sync engine and datastore, meaning you can take advantage of its existing features right out of the box. On the front end, one such feature is undo/redo, which extends React Flow’s existing functionality.
Multiplayer undo/redo is trivial to implement with the
useUndo and
useRedo hooks from
@liveblocks/react.
Around 100 React hooks with various functionality are available, for example:
useOthers: Create live
avatar stacks and custom presence.useThreads: Add threaded
commenting to your flow (example).useSyncStatus: Get
React Flow sync status and show a spinner.useLostConnectionListener:
Gracefully handle poor connections.useBroadcastEvent:
Broadcast custom realtime events to connected users.We also provide React components, DevTools extensions, and text editors.
On the back end, Liveblocks has a Node.js SDK, REST API, and webhooks, which allow you to fetch and edit your React Flow state, and trigger events when it’s modified.
Alongside REST API functions and methods, you can also trigger changes when the
React Flow document is modified using our
storageUpdated webhook.
Additionally, you can check your documents in the dashboard, and
develop/test locally using our dev server.
Liveblocks allows AI agents to collaborate with other agents and humans in realtime. Recently we released new APIs for presence which can be used to display live AI cursors in your application, and combined with server-side editing, you can create an AI agent that collaborates like a human.
True conflict-resolved multiplayer is required for AI agents to edit simultaneously with other users, otherwise changes will be lost. Liveblocks Storage is a sync engine designed specifically for this use case, enabling seamless editing.
Multiple users can even edit the same node at the same time, and changes will be merged and resolved automatically.
Server-side editing is already possible via
mutateStorage, but later
this month we’ll be releasing new back end APIs designed specifically for React
Flow and AI, making realtime server-side editing easier than it is today.
Follow us on X, LinkedIn, and Bluesky for updates on this.
We’ve created three new examples to help you get started with React Flow and Liveblocks. Try the live demos below.
A flowchart builder that allows you to place different elements on the page. Elements’ colors and shapes can be changed, and connections can be made between them. It also features comment pins, undo/redo, and live cursors.
Our Collaborative Flowchart Builder example
A flowchart builder similar to the previous example, but with an AI editing dialog box. Try asking it to “make the chart horizontal” to watch it work.
Our Collaborative Flowchart AI example
A basic read-only setup with collaborative editing and a custom interactive node.
Our Collaborative Flowchart example
To get started with React Flow, follow our new quickstart guide for Next.js.
Get started now
Contributors include:
3 authors