Graphemes keep
their place.

One shared string, live

Three watershed documents share one SharedText, a collaboratively-typed string. One client creates it and shares the handle; the others resolve it. They talk to one sluice, the in-memory server that ships in the library. It runs the production client runtime without a network backend. Type in any editor: your keystrokes show in magenta while pending, then settle to ink once the sluice sequences them and every replica lands the same text.

Every keystroke is diffed into one minimal grapheme edit: an insert, delete, or replace against grapheme indexes, never raw UTF-16 offsets. Stage a race: Crowd an insert has B and C type different words at the same spot; Overlapping edit has B replace a word while C deletes across it. Both converge, because each grapheme keeps a stable identity: the delta names graphemes, not character positions.

The seed text is grapheme-rich on purpose. 👨‍👩‍👧 is a ZWJ sequence, several code points joined into one grapheme, one index; a cursor can never split it. The í in río is a letter plus a combining accent, again one grapheme. And 🏞️ includes a variation selector. SharedText indexes by grapheme, so none of these can be bisected by an edit.

All of that, as one tag

Everything the rig above does by hand ships as a component: <watershed-textarea>, the watershed_lustre editor compiled from Gleam and registered as a custom element. These two panes are that element: two documents, one shared SharedText, the same in-memory sluice, and this page contributes no editor code at all. The channel goes in as one property (el.channel = text); edits, errors, and this user’s cursor come back out as DOM events; the other pane’s cursor goes back in as data.

The component owns what the naïve bridge gets wrong: each keystroke is diffed into one minimal grapheme op, a peer’s edit can’t teleport your caret, and an IME composition survives remote keystrokes. Select a few words in one pane and a named highlight appears in the other, then type before them and watch it stay glued to those words. It travels as content-bound anchors, not offsets, which is the same machinery that keeps your own caret in place.