Real-Time Collaboration System

How several people edit one document at once and all end up with the same result: operational transformation, CRDTs, the server that coordinates them, presence, offline edits and storage.

Overview

In a collaborative editor, several people change the same document at the same time and see each other's changes within a fraction of a second. Google Docs, Figma and Notion-style editors all work this way.

The hard part is not sending the changes; a WebSocket does that. The hard part is that two people can edit at the same moment, each on their own copy, and neither edit may be lost. Every copy must still end up identical. This property is called convergence. Each user also expects their own typing to appear instantly, so a client cannot wait for the server before showing a change.

There are two main families of solutions. Operational transformation (OT) adjusts each incoming edit to account for edits that happened first, usually with a server deciding the order. CRDTs (conflict-free replicated data types) give every piece of the document a unique identity, so edits can be merged in any order without adjustment. Around either one you still need a server design: connections, one place that owns each document, storage, presence and offline support.

What you will be able to do

  • Show with a small example why concurrent edits diverge, and how OT and CRDTs each make them converge.
  • Choose between OT, a CRDT and a simpler server-ordered model for a given product.
  • Design the service: WebSocket connections, one owner per document, an operation log with snapshots.
  • Add presence (cursors, who is here) without putting it in the document's history.
  • Handle a client that goes offline, keeps editing, and comes back.

Key concepts

  • Concurrent edits
  • Operational transformation
  • CRDTs
  • Central sequencer
  • Last writer wins
  • Presence and cursors
  • Offline and reconnect
  • Snapshots and op log
  • One server per document

Interview questions

  • Design a collaborative text editor like Google Docs.
  • Walk through how OT resolves two concurrent edits.
  • How do CRDTs avoid conflicts, and what do they cost?
  • Figma is not a text editor. How would you handle collaboration on a design canvas?
  • How do you implement live cursors and presence at scale?
  • A user edits offline on a plane for two hours. What happens when they land?
  • How do you make sure all editors of one document reach the same server, and what if it fails?
  • Why keep both an operation log and snapshots?

Sign up free to read the full topic

More System Design topics

Start free on Cariara · Coding problems · System design studio