Design Google Docs (collaborative editor) | Frontend System Design

HardPremiumSystem Design

Frontend System Design interview practice: Frontend system design for a real-time collaborative document editor.

Problem

Design a collaborative rich-text editor supporting real-time multi-user editing, formatting, and presence.

Editing model: contentEditable vs a model-driven editor (ProseMirror/Slate-like). Maintain a document model, not raw HTML.
Concurrency: Operational Transformation (OT) or CRDT to merge concurrent edits without conflicts. Discuss trade-offs (OT needs a central server; CRDTs are eventually consistent and P2P-friendly).
Sync: send small ops over WebSocket; server broadcasts/transforms; clients apply and acknowledge; handle offline edits and reconnection.
Presence: show collaborators' cursors/selections (broadcast cursor positions, map to local doc positions after transforms).
Formatting: bold/italic/lists/headings as marks/attributes in the model; undo/redo per-user.
Performance: debounce/batch ops, virtualize very long docs, incremental rendering.
Persistence: autosave, version history, conflict-free reconciliation.

Premium question

Unlock the full model solution for this question with Mentoxis Premium.