Senior LevelSystem Design & Architecture
How do you design a Real-Time Collaborative Editor (like Figma or Google Docs)?
❓ Interview Prompt: Explain real-time collaborative editor architecture, Operational Transformation (OT) vs Conflict-Free Replicated Data Types (CRDTs), WebSockets, and document history.
Designing a Real-Time Collaborative Document/Canvas Editor (Figma/Google Docs):
Architecture:
1
Concurrency Control:
•
Operational Transformation (OT): Requires a central server to transform edit operations relative to concurrent user edits (used in Google Docs).
•
CRDTs (LWW-Element-Set / Yjs): Mathematically proven data structures where edits can be merged in any order on client devices deterministically without a central lock (used in Figma).
2
Communication: WebSockets for real-time operation streaming.
Code Implementation Example
markdown
Real-Time Collaborative Editor Architecture:
[Client A (Yjs CRDT)] ──(WebSocket Ops)──> [WS Gateway]
│
(Broadcast CRDT Ops)
│
▼
[Client B (Yjs CRDT)] <──(WebSocket Ops)─── [WS Gateway]
│
(Append to Event Log)
▼
[Document Storage]💡Real-time collaborative editor architecture using CRDTs and WebSockets.
🎯 Interview Key Takeaway
Design real-time collaborative editors using CRDTs or OT over WebSockets to merge concurrent edits deterministically.
#System Design#Collaborative Editing#CRDT#WebSockets#Senior
Back to all System Design & Architecture Questions→