Building REAL-TIME collaborative diagrams with React Flow, Yjs, and HocusPocus [Part 1/2]
Building collaborative features in React Flow is easier than you might think. In this video, we’ll set up a real-time diagram synced with Yjs and HocusPocus, starting from a minimal React Flow setup and adding live synchronization between multiple clients.
If you’ve ever wanted to make your diagrams collaborative — where every node, edge, and connection updates instantly across browsers — this episode is for you.
What we’ll cover:
→ Setting up a minimal HocusPocus backend for Yjs synchronization
→ Connecting Yjs to React Flow with shared node and edge maps
→ Observing incoming changes and syncing them with local React Flow state
→ Sending outgoing updates from user actions (moving, editing, or deleting nodes and edges)
→ Handling new connections via React Flow’s onConnect callback
→ Testing real-time collaboration between multiple clients
What you’ll learn:
→ How React Flow integrates with Yjs for live, collaborative editing
→ Why HocusPocus is a lightweight and powerful backend for syncing shared data
→ How to structure your app for real-time updates and prevent sync issues
GitHub repo with code from this episode: https://github.com/synergycodes/react...
Yjs with React Flow ebook: https://www.synergycodes.com/react-fl...
00:00 What we’re building and why
00:21 Minimal backend setup with HocusPocus
00:55 Basic flow setup
01:17 Creating Yjs maps for nodes and edges
01:43 Observing changes from Yjs
02:27 Sending updates back to Yjs
03:39 Testing real-time sync between clients
04:11 Summary and what’s next in Part 2
Next episode [soon]: Yjs awareness (user cursors, selections) and persistence
Contact for queries and consulting: https://www.synergycodes.com/react-flow
Or ask the community: https://community.synergycodes.com