A deep dive into the technical architecture behind live cursors and collaborative editing in our workflow canvas.
The challenge
Real-time collaboration sounds simple until you try to build it. Multiple users editing the same workflow simultaneously creates complex synchronization problems.
What happens when two people move the same node? How do you handle offline edits? How do you make it feel instant?
Our approach
We use CRDTs (Conflict-free Replicated Data Types) for the core data model. CRDTs guarantee that concurrent edits always converge to the same state, without coordination.
For the networking layer, we built on top of Liveblocks. It handles the WebSocket connections, presence, and room management so we can focus on the product.
The architecture
Client A ──┐
├── Liveblocks ── CRDT Store ── Postgres
Client B ──┘
Each client maintains a local copy of the workflow. Edits are applied locally first (optimistic updates), then synced through Liveblocks to other clients.
Presence
Live cursors are separate from document sync. We broadcast cursor positions at 60fps using Liveblocks presence. This gives the feeling of working together in real-time.
What's next
We're working on comments, version history, and branching. Imagine treating workflows like code—with pull requests and merge conflicts.