Design a Collaborative Editor – Frontend System Design

We’ll walk through the frontend system design for a collaborative document editor like Google Docs. Our goal is to design an editor surface where typing feels local, remote edits land without jumping the caret, and other people show up as live cursors — even when two people type in the same paragraph. You’ll see how the collaboration engine sits behind a View Model, why presence is a separate channel from document ops, and the OT vs CRDT trade-off interviewers expect you to pick on purpose.

The hard part is not the toolbar. Google Docs is a canvas — it has been since the 2021 rewrite — plus a hidden input for IME and screen readers. The hard part is building that canvas: a layout engine that wraps glyphs into lines, a tile rasterizer that paints only the viewport, a hit-test that turns (x, y) into a document offset, and a collaboration layer that remaps the caret when someone else types. We’ll... premium content.