Real-time collaborative whiteboard on CRDTs
Tandem
Role: Frontend developer — real-time & canvas · Period: 2024 · Client: Own product · Platforms: Web
A Figma/Miro-style whiteboard where several people edit one board at the same time without conflicts — live cursors, presence, sticky notes, shapes, drawing and per-user undo, built on Yjs CRDTs.
Remote teams brainstorm on shared boards, and the hard part isn't drawing rectangles — it's letting many people change the same thing at once without losing anyone's work. Tandem stores the board in a CRDT (Yjs), so concurrent edits always merge to the same result on every client.
Everyone sees each other's cursors, names and selections in real time; undo only reverts your own changes; the board persists offline and merges back when you reconnect. The demo syncs between browser tabs and includes a bot teammate that is a genuine second peer, editing through the same sync protocol.
Key features
- Infinite SVG canvas with pan, zoom around the cursor and a dotted grid
- Sticky notes, rectangles, ellipses, text and freehand drawing
- Live cursors, presence avatars and other people's selections
- Conflict-free simultaneous editing with Yjs CRDTs
- Per-user undo / redo that never reverts someone else's work
- Offline-first persistence in IndexedDB
- A bot teammate that edits through the real sync protocol
What I did
- Built the whiteboard with React 19, TypeScript and Vite, with a hand-written SVG canvas
- Wrote a Yjs transport over BroadcastChannel (state-vector sync, incremental updates, awareness)
- Implemented presence: cursors, selections and identities per participant
- Designed the provider layer so cross-device sync (y-websocket, Liveblocks) is a drop-in swap
Results
- Edits from any tab merge without conflicts
- Undo is scoped to each user
Tech stack
- React
- TypeScript
- Vite
- Yjs (CRDT)
- SVG
- IndexedDB