Toolgeist › Developer

CRDT Playground — Offline Collaborative Editing Without Conflicts

Three replicas — Alice, Bob and Carol — and a network you switch on and off. Take them offline, edit the same shared document, shopping list or like counter on each, then bring them back online and sync in any order. They converge without a server deciding who wins, because each data type is a real CRDT (conflict-free replicated data type): the document is an RGA sequence where every character has a unique id, the list is an add-wins observed-remove set, and the counter keeps a tally per replica. Each merge is commutative, associative and idempotent, which we checked with 400 random editing histories per type with syncs shuffled and duplicated. The page also shows what a naive ‘last save wins’ approach would have lost.

How to use CRDT Playground — Offline Collaborative Editing, Visualized

  1. Pick the shared document, the shopping list or the like counter.
  2. With everyone offline, make different edits on each replica.
  3. Bring replicas online and sync — in any order, as often as you like.
  4. Compare the merged result with what last-save-wins would have kept.

Frequently asked questions

What is a CRDT?
A conflict-free replicated data type: a data structure designed so that copies edited independently, even offline, can always be merged into the same result without coordination. The trick is making the merge commutative, associative and idempotent, so order, timing and duplicate deliveries do not matter.
How does collaborative text avoid scrambling two people’s typing?
Each character gets a unique id and remembers the character it was typed after. When two people type at the same spot, each person’s run of characters stays attached to its own starting point, so the words end up next to each other rather than interleaved letter by letter.
What happens if one person removes an item another person just re-added?
On the shopping list the add wins. A remove only cancels the additions it has actually seen, so an addition made concurrently — which the remover never saw — survives the merge.
Why not just keep the most recent save?
Because that silently discards everyone else’s concurrent work. The page shows the comparison: with whole-document last-save-wins, only one person’s version survives a sync; with a counter, clicks from other devices vanish.
What is the catch?
Metadata. The document remembers every character ever typed, including deleted ones as tombstones, and the page shows the count. Production collaborative editors add garbage collection and compact encodings on top of the same idea.
Is this how real collaborative apps work?
The convergence idea is the one used by local-first and collaborative tools. This playground implements the classic textbook versions of each type so you can see the mechanics; production libraries use more optimised variants.

Related Developer tools

Also searched for: crdt explained interactive · conflict free replicated data type demo · offline collaborative editing how it works · or-set add wins example · rga text crdt visualization

Browse all 738 free tools on Toolgeist →