Design a Real-Time Collaborative Canvas & Design Tool (Figma / Google Docs)
A real-time multiplayer document engine uses stateful sticky session routing and server-authoritative operational ordering to sync 2D scene graphs across worldwide collaborators without locking.
Live Architecture Studio
Edit components, modify labels, add databases, or redraw connections directly on this canvas:
Loading Figma Multiplayer Engine Blueprint...
Mounting vector diagram elements, nodes, and capacity metrics
Loading Figma Multiplayer Engine Blueprint...
Mounting vector diagram elements, nodes, and capacity metrics
1. Problem & Challenge
When 20 designers simultaneously resize frames, type copy, and rearrange vectors, network delays and concurrent edits create divergence and cycles. The engine must guarantee instant 0ms local responsiveness and deterministic convergence.
2. Core Building Blocks & Responsibilities
👉 Desliza la tabla para ver roles y responsabilidades| Component | Role | Plain-English Explanation |
|---|---|---|
| WebAssembly Client Engine | Optimistic Renderer | Runs C++/Rust in browser Wasm to apply local edits instantly at 60 FPS, buffering unconfirmed mutations until server ACK. |
| Sticky Session Envoy Proxy | Document Affinity Router | Hashes document_id so all collaborators on the same file connect over WebSocket to the exact same multiplayer server process. |
| Authoritative Sequencer (Rust) | Conflict Arbiter | Assigns monotonic sequence numbers to operations, resolving property conflicts via Last-Writer-Wins and checking for tree cycles. |
| Ephemeral Presence Bus | Cursor & Selection Stream | Broadcasts 30Hz mouse cursor positions directly in-memory, bypassing persistent storage to prevent database bloat. |
| WAL & S3 Snapshot Service | Durability Engine | Appends operations to a Write-Ahead Log in DynamoDB, debouncing background snapshot uploads to Amazon S3 every 30 seconds. |
3. Step-by-Step Request Flow
User Modifies Element
Client moves a shape: changes apply locally at 0ms latency in Wasm client memory.
WebSocket Delta Push
Operation delta is transmitted over WebSocket to the document-specific authoritative server.
Server Assigns Sequence Number
Rust server process verifies tree hierarchy (checks no cycles), stamps monotonic seq_id, and confirms to sender.
Broadcast to Collaborators
Confirmed delta is fanned out to all connected peers in the session to update their canvas trees.
4. Architectural Trade-offs
Server-Authoritative LWW Tree vs Pure CRDT
Chosen: Server-Authoritative LWW Tree
Rationale: Pure CRDTs (like Yjs) maintain causality metadata and deletion tombstones that cause 3x to 10x memory bloat in massive 50MB canvas files. A central sequencer eliminates tombstone bloat while guaranteeing convergence.
Sticky Stateful Servers vs Stateless Mesh
Chosen: Sticky Stateful Routing
Rationale: Stateless servers require cross-server distributed locks to order mutations. Pinning a document to a single server process allows lock-free single-threaded in-memory sequencing.
Interview Tip
Explain the Tree Cycle Anomaly: If User A moves Frame 1 inside Frame 2, while User B moves Frame 2 inside Frame 1, naive LWW creates an infinite cycle (1 contains 2 contains 1) causing both to disappear! The server must run an ancestor-cycle check before confirming reparent operations.
Explore Related System Blueprints
TinyURL Shortener
A URL shortener converts a long link (like a 100-character article URL) into a compact 7-character key (like tinyurl.com/xyz123) and redirects visitors in under 15 milliseconds.
API Rate Limiter
A rate limiter acts as a digital bouncer at the door of your API, ensuring each client stays within their allowed request limits (e.g. 100 requests per minute) and blocking abusive traffic.
Video Streaming CDN
Streaming high-definition video to millions of smart TVs and mobile phones requires breaking large 10GB video files into tiny 5-second chunks, encoding each into 20 different resolutions, and caching them right inside local ISP networks.
Uber Dispatch Engine
A real-time geospatial dispatch system matches riders with the most optimal nearby drivers using 64-bit H3 hexagonal indexing and 2-second batch optimization, minimizing city-wide pickup ETA and driver idle time.
Stripe Payments Ledger
A resilient financial payments architecture guarantees strict consistency (CP system) using cryptographic idempotency reservation, double-entry balanced postings, and sharded balance locks.
Twitter Timeline & Feed
A timeline generation system balances high write amplification against fast sub-50ms reads by pushing tweets to followers of regular accounts, while pulling and merging celebrity tweets on-demand.