Collab Whiteboard
Real-time multiplayer whiteboard with live cursors and freehand drawing
Real-time sync <100ms
Live cursors with presence
Freehand + shapes + sticky notes
Touch device support
01The Problem
Real-time collaborative tools are deceptively complex. Handling concurrent edits, maintaining consistent state across clients, and showing live cursors without lag requires careful architecture. I wanted to understand how tools like Figma and Miro actually work.
02The Approach
Used Liveblocks for real-time state synchronization — it handles conflict resolution, presence, and live storage. The canvas layer uses the HTML5 Canvas API with React for the drawing surface. Sticky notes, shapes, and freehand strokes are stored as Liveblocks storage objects that sync instantly across all connected clients.
03Architecture Decisions
Liveblocks for real-time sync
Liveblocks provides a hosted CRDT-based storage layer. All canvas elements are stored in Liveblocks storage — when one user adds a shape, all other clients receive the update in <100ms without any backend code.
Canvas API for drawing surface
The drawing canvas uses the HTML5 Canvas API directly (not SVG) for performance. Freehand strokes are captured as arrays of points and stored as compressed paths in Liveblocks storage.
Presence for live cursors
Each user's cursor position is broadcast via Liveblocks presence (ephemeral, not stored). Other clients render cursor positions with the user's name and color. Presence data is separate from persistent storage — it never hits the database.
04Key Insight
The hardest part of collaborative tools isn't the real-time sync — Liveblocks handles that. It's the UX: making concurrent edits feel natural, choosing which operations should block vs. merge, and deciding what state is ephemeral (cursors) vs. persistent (strokes). The architectural decision of presence vs. storage is the key one to get right.
05Why It Matters
The project I built to understand real-time multiplayer architecture. Understanding how Liveblocks CRDTs work makes reading Figma's engineering blog posts click in a way they didn't before.