Designing Data-Intensive Applications
Case 9

OT, CRDTs, and Conflict-Free Editing

Concurrent edits merge without a single global lock. OT needs a server; CRDTs can peer-sync.

Diagram
Figma at scale

Multiplayer editing uses a central server to order operations and broadcast deltas. CRDT research powers newer whiteboard features with less server coupling.

typescript — Yjs-style document update
// CRDT document sync (Yjs-style conceptual)
import * as Y from "yjs";
const doc = new Y.Doc();
const text = doc.getText("content");
text.insert(0, "Hello");
const update = Y.encodeStateAsUpdate(doc);
// Broadcast update to peers; merge is commutative — no central lock
Key Takeaways
  • Operational Transformation: server transforms concurrent ops against each other.
  • CRDTs: mathematically merge without central coordinator (Yjs, Automerge).
  • Choose OT for rich text with complex intent; CRDTs for JSON/tree structures.
  • Periodic snapshots bound replay time on reconnect.
  • Comment threads attach to stable anchors (block IDs), not byte offsets.
  • Offline edit queues flush on reconnect with merge.
OTCRDTYjsFigmaoffline sync
← Presence and PermissionsStorage and Real-Time Transport →