CodePark/ questions / Classic designs
START PRACTICINGPRACTICE
Frontend question · Frontend system design › Classic designs

Design a collaborative document editor like Google Docs at a high level. How do OT and CRDTs differ?

Apply edits locally first, send them as operations over a WebSocket, and merge remote edits with OT or CRDTs. OT needs a central server to order edits. CRDTs merge on any client without one.

Requirements: several users edit the same document at the same time. They see each other's cursors and presence (who is online). Editing keeps working through brief disconnects, and history is kept. Non-functional:

  • Local typing never waits on the network.
  • Every client ends up with the same document. This is called converging.

Architecture:

  • The editor (ProseMirror, Lexical or similar) holds a local document model.
  • Local edits apply immediately and become operations sent over a WebSocket.
  • Remote operations are merged into the local model.
  • Presence (cursors, selections, who is online) uses a separate, lossy channel. Lossy means it is fine if some updates are lost.

OT vs CRDT:

  • With Operational Transformation (OT), a central server orders the operations. It transforms concurrent operations against each other. For example, an insert at position 5 shifts if someone inserted text before it. OT is proven in Google Docs. But it needs a central authority and tricky transform functions.
  • CRDTs (Conflict-free Replicated Data Types, such as Yjs and Automerge) give each character a unique id. So concurrent edits merge in the same, predictable way on any peer, with no central order. They suit offline editing and peer-to-peer. The cost is extra metadata.

Persistence: store snapshots plus operation logs. Queue offline edits locally.

Trade-offs: CRDTs cost memory for metadata, while OT depends on the server.

  • Edits apply locally first, then go out as operations over a WebSocket.
  • OT uses a central server to transform concurrent operations.
  • CRDTs give each character a unique id and merge without a central order, which suits offline use.
  • Presence uses a separate, lossy channel.
  • Store snapshots plus an operation log.