Design a Collaborative Document Editor (Google Docs)

Real-Time & CollaborationHarddesign-collaborative-editor

Design a Collaborative Document Editor (Google Docs)

Design concurrent editing where twenty people type into the same paragraph at once, every client converges on the same document, and nobody's keystroke is lost.

Operational TransformationCRDTsVersion VectorsSnapshot + Oplog

Traffic & Capacity Estimates:

10M concurrent documents · 50 editors per doc peak · <50ms local echo · offline editing

Functional Requirements

•Apply local edits instantly and reconcile them with concurrent remote edits deterministically.
•Show live cursors, selections, and presence for every collaborator.
•Persist document history so any prior version can be restored and diffed.
•Support offline editing with reconciliation on reconnect.

Non-Functional Requirements

•Local keystroke echo under 50ms — never wait for the server to render a character.
•All clients must converge to an identical document state given the same operation set.
•A server restart must not lose committed operations or corrupt the document.

Back-of-the-Envelope Math

50 editors * 5 ops/second = 250 ops/second per hot document, each broadcast to 50 peers = 12,500 messages/second.
Snapshot every 1,000 operations caps document load time; the oplog between snapshots stays small.

Key Architectural Trade-offs

Operational Transformation (compact, needs a central server to order operations) vs CRDTs (peer-to-peer and offline-friendly, larger metadata per character).
Server-authoritative ordering makes convergence easy to reason about and makes the document server a scaling unit you must shard by document.
Retaining the full operation log gives perfect history and unbounded growth; snapshot-plus-compaction bounds it and loses fine-grained undo depth.

Click or drag a component onto the canvas, then connect the handles to draw the data flow.

3 nodes · 2 edges

Components · 35

Client & Edge4

Compute & Gateway7

Storage & Caching11

Messaging & Streaming6

Coordination & Ops5

Intelligence2

React Flow