Overview
Real-time collaboration needs compact update messages, deterministic merge, and often compatibility with existing Yjs providers. Rust implementations can sit in WASM next to your app, while awareness/cursors stay in JS.
Editor-specific CRDT design is also covered from a product-neutral angle in Editor → CRDT operations.
Yrs & Yjs interop
The y-crdt ecosystem provides Rust types (Yrs) and WASM bindings so you can produce/consume updates compatible with Yjs wire format—useful when the rest of your stack expects Yjs.
- Keep network codecs and merge in WASM if you need predictable performance or shared code with native clients.
- Keep UI binding (mapping CRDT to editor ops) in JS if you already use ProseMirror/Lexical/Slate adapters.
Editor host in JS
The WASM module rarely replaces the whole editor UX: it’s a collaboration engine or transform worker. Selection, IME, and toolbar still follow web patterns described in other Wasm guides.
Snapshots vs streams
Bootstrapping collaborators usually needs an initial snapshot plus a stream of updates. Decide where snapshots are generated (Rust vs JS) and how large they are over the WASM boundary—same concerns as JS ↔ WASM boundary.
For offline-first, persistence layers (IndexedDB, OPFS) often live in JS or via separate WASM shims—plan integration tests across reload.
More reading
Wasm guides
Editing approaches
contenteditable + WASM: source of truth, event order, DOM↔model loop, normalization, and when to call Rust.
IME & composition
composition events, syncing a Rust document model, and why the browser still owns the IME.
JS ↔ WASM boundary
Strings, copies, batched ops, async vs input events, and keeping the hot path cheap.
Clipboard & input routing
beforeinput, paste, routing decisions in JS vs sanitization in WASM.
Tooling, bundle & workers
wasm-pack, wasm-opt, code splitting, Web Workers, COOP/COEP and threads.
Selection, Range & offsets
UTF-16 vs UTF-8 indices, Selection/Range in JS, mapping to a Rust model and getTargetRanges.
Undo & redo model
Browser undo stack vs model history, programmatic DOM, and WASM-hosted transactions.
Accessibility (WASM host)
Roles, focus, screen readers when the editable surface is still the browser.
Testing & debugging
E2E, profiling the JS↔WASM boundary, reproducing IME and paste in CI.
Security & deployment
CSP, SRI, module integrity, and hosting WASM next to contenteditable.