HomeDistributed & Parallel ComputingOperational Transform 2D: Two Documents, One Truth

Operational Transform 2D: Two Documents, One Truth

A flat, top-down view of two mobile clients editing the same text buffer at once over a lagging link: character tiles for Site A and Site B, packets crossing a network lane between them, and a live convergence pulse strip. Toggle Operational Transform off to watch the same edits corrupt the shared document instead of reconciling it.

Distributed & Parallel Computing2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-realtime-collaboration ↗ Open standalone

Two simulated mobile clients, A and B, edit the same text buffer at once over a connection with real latency, drawn here as a flat top-down diagram: Site A's row of characters up top, Site B's below, and a network lane between them carrying every insert or delete as a travelling packet. Every keystroke becomes a genuine operation that applies instantly on its own device and transforms its index against whatever the other side already did locally before landing — the same insert-vs-insert, insert-vs-delete and delete-vs-delete rules used by real collaborative editors — so both rows of characters provably converge to one identical string no matter the order operations arrive in. A pulse strip along the bottom tracks that convergence second by second. Switch Operational Transform off and the very same edits apply at their raw, untransformed positions instead: the two rows drift apart and the pulse strip turns red, a direct demonstration of why naive last-write-wins syncing corrupts shared documents on real mobile networks.

⚙ Under the hood

A flat, top-down view of two mobile clients editing the same text buffer at once over a lagging link: character tiles for Site A and Site B, packets crossing a network lane between them, and a live convergence pulse strip. Toggle Operational Transform off to watch the same edits corrupt the shared document instead of reconciling it.

operational-transformcollaborative-editingdistributed-systemsconflict-resolutionmobilealgorithms2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)