Collaborative Editing: Operational Transformation

Collaborators

Active editors 3

Network latency 450 ms

Edit rate (ops/s per editor) 1.0

Where editors type

Sync state

All changes synced

In transit

Ops applied

Document length

Conflicts resolved

Editors

How it works

Each block in the grid is one unit of a shared document. Every colored editor above the grid keeps typing independently and sends an insert or delete operation toward the central hub — but the network takes time, so two editors can send operations that were both based on the same earlier document state. Without correction, applying them naively would corrupt the document or make copies diverge.

A real collaborative editor (Google Docs, Etherpad, and early Google Wave all used this family of algorithms) fixes this with Operational Transformation. Each operation carries the document version it was written against. When it reaches the server, it is transformed against every operation the server already applied since that version:

transform(op, applied):
  if applied.type == insert and applied.pos <= op.pos:
      op.pos += 1
  if applied.type == delete and applied.pos <  op.pos:
      op.pos -= 1
  if both delete the same pos: op is dropped (already gone)

Applying transformed operations in server-arrival order guarantees every client that receives the same operation stream ends up with the same final document, no matter the order edits were made in or how much the network delayed them. That property is called convergence.

Active editors — how many simulated collaborators are typing at once.
Network latency — one-way delay each operation spends in flight (jittered ±30%); push it up to see the hub fall behind and operations pile up "in transit".
Edit rate — how fast each editor generates operations.
Spread out / Same spot — spreading edits across the document rarely collides; clustering everyone on the same few blocks forces frequent transforms, which the conflict counter tracks.

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.