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.
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.
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.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install