CRDT Constellation — Three Offline Editors, One Convergent Document
Partition three replicas, type three realities, then watch immutable operations settle into one deterministic document.
What this is
A hands-on sequence-CRDT simulator with three genuinely independent browser-side replicas. Isolate Atlas, Beacon, or Cygnus; type a different document on each; inspect the resulting insert and delete operations; then deliver those messages one at a time or let the network play.
The model is deterministic. Inserts reference an immutable predecessor, concurrent siblings use a Lamport-clock and device-ID total order, and deletes leave tombstones instead of shifting indexes. Operations may arrive before their anchors and safely wait. The visible convergence hash only turns green when every replica has the same complete operation set and renders the same text.
Why this is mind-blowing
There is no master copy and no last writer quietly erasing the others. The conflict preset changes the same word on three partitioned devices, then shuffles the delivery schedule from a repeatable seed. All three alternatives survive, every replica independently computes the same order, and reconnecting drains the queue into one byte-for-byte result.
That is the central CRDT promise made visible: agreement comes from the algebra of the operations, not from a server deciding whose version wins. The hash is proof of shared state, while the operation inspector shows exactly why each character occupies its final position.
Prompt
Build “CRDT Constellation — Three Offline Editors, One Convergent Document,” an educational, visually polished, single-file interactive demo. Show three simulated devices editing the same document. Users can partition/reconnect devices, type divergent changes, inspect queued operations, step or play message delivery, run a conflict preset, and see a convergence hash/invariant. Implement a real deterministic convergence strategy (not a fake animation), make reconnect converge all replicas, and explain the operation ordering in the UI. Include reset, pause/play, deterministic seed/preset, keyboard and pointer/touch usability, responsive 390px layout with no horizontal overflow, and prefers-reduced-motion behavior. One self-contained HTML file only: inline CSS/JS, no external assets, no CDN, no fetch/network calls, no build tooling; target <=160KB.Paste into your favorite AI and adapt it to your context.
What I learned shipping it
- A sequence CRDT can preserve cursor-relative intent by anchoring each inserted atom to its predecessor, while tombstones keep those anchors valid after deletion.
- Convergence needs a total sibling order, not arrival order: the same Lamport, device, and sequence tuple must be compared identically on every replica.
- A meaningful convergence indicator hashes canonical operations as well as visible text, because equal text can temporarily hide unequal replica state.