Collaborative Whiteboard

100 designers open the same Figma file and start moving objects at once. Nobody sees sync errors, there is no 'last write wins' lockup. How is that possible without a single point of coordination?

• **Figma** supports 1,000+ concurrent users in one file through WebSocket plus a CRDT-style architecture. In 2020 Figma published details: every object has a unique ID, ops are atomic, and LWW with a server Lamport clock resolves conflicts
• **Miro** serves 50M+ users on a canvas infrastructure. Sticky notes use Yjs (CRDT) for text content and LWW for object positions. The architecture supports offline work with later automatic merge
• **Excalidraw** (open source) implements a fully decentralized collaborative canvas through WebRTC p2p plus Yjs CRDT. There is no central coordinator; clients sync directly with peers
• **Google Jamboard** (until its 2024 shutdown) used Firebase Realtime Database as transport for canvas operations. Firebase enforced ordering via server timestamps and resolved conflicts through transactions

Canvas Sync: the shared-board architecture

A collaborative canvas is a distributed data structure: hundreds of cursors, thousands of objects, every one of them editable concurrently. The naive lock-based approach kills the UX. Figma solved it differently: each client keeps a local copy of state, changes flow as operations, conflicts resolve deterministically.

Figma supports 1,000+ concurrent users in one file. Cursors stream over WebSocket throttled from 60 fps to 15 fps under load. Object operations go on a separate, higher-priority channel. Miro serves 50M users on a canvas infrastructure with a similar architecture.

Splitting channels is critical: cursor awareness is lossy (a missed cursor position is fine), object operations are lossless (a missed object change is a disaster). WebSocket gives reliability for operations, while cursors can be throttled and dropped on loss without retransmission.

Shape Operations: types and atomicity

Every canvas change must be expressed as an **atomic operation** with defined semantics. Not 'draw a rectangle' but 'insert shape with id X at position Y with size Z'. That lets the system apply, undo, and merge operations deterministically.

• **INSERT**: add an object with a unique id (UUID), initial properties, and z-order position
• **UPDATE**: change properties of an existing object (position, size, style) - delta only, not full replacement
• **DELETE**: mark the object deleted (soft delete for undo/redo and conflict resolution)
• **MOVE**: change position and/or z-order - a dedicated op to optimize frequent moves
• **GROUP/UNGROUP**: create/break a group of objects - a compound op with atomic guarantees

Vector Graphics Sync: Bezier paths and transforms

Vector graphics add complexity: Bezier curves, transformation matrices, nested groups. Syncing a 100-point path when one point changes must not retransmit the whole path. Figma solves this with **path delta encoding**: only the changed point plus its index travels on the wire.

Figma serializes operations with protobuf instead of JSON: the binary format is 3-5x more compact. With 100 concurrent users actively drawing, the serialization savings noticeably cut bandwidth and processing delay.

Whiteboard CRDT: conflicts without a coordinator

When several users edit one object at the same time you need a conflict-resolution strategy. Figma uses **Last-Write-Wins** (LWW) with a server timestamp for most properties: the last write wins. For text content inside frames it uses Yjs (CRDT), where every character has a unique identifier.

A CRDT (Conflict-free Replicated Data Type) for a whiteboard gives each object a unique ID (client-id + Lamport clock); ops are commutative and idempotent. Two clients that apply the same set of operations in different orders end up in the same state. Excalidraw (open source) uses this model with no central server.

Miro uses operational transformation (OT) for collaborative sticky-note text but LWW for object positions and sizes. A hybrid: CRDT/LWW for structural properties, OT for text where per-character precision matters.

Takeaways

• **Two-channel architecture**: cursor awareness (lossy, throttled 60->15 fps) and object operations (lossless) need different QoS guarantees and belong on separate channels
• **Atomic operations** (INSERT/UPDATE/DELETE/MOVE) with unique object IDs are the only way to deterministically merge concurrent changes without a coordinator
• **LWW for structural properties + CRDT/OT for text** - the hybrid strategy from Figma and Miro: positions resolve by timestamp, text merges character-by-character through Yjs

Related topics

Collaborative whiteboard is an applied area for core real-time-system concepts:

• CRDT structures — The mathematical foundation of conflict-free replication that Figma uses for object operations
• Operational Transformation — An alternative conflict-resolution approach used for text content in Miro and Google Docs
• Live location tracking — Similar problem: syncing many object positions in real time with varying QoS

Вопросы для размышления

• How would Figma's architecture change if it had to support offline editing with sync on reconnect?
• At what concurrent-user count does LWW start producing noticeable UX issues? How does this depend on content type?
• Why did Excalidraw pick p2p WebRTC over a central server? What architectural trade-offs does that bring?

Связанные уроки

• net-01-intro