Playground

Live @robonen/editor instances built with the default registry — the real headless controller, single-contenteditable view, and CRDT-backed model from the API reference. Switch tabs to explore the capabilities.

Loading editor…

How it's wired

The editor is created from a registry and a document, then rendered with a single EditorRoot. Multiplayer is just two editors, each bound to its own CRDT replica with bindCrdt, exchanging ops over any transport.

import {
  EditorRoot, EditorContent, EditorRemoteCursors,
  createDefaultRegistry, createDoc, createEditor, createEditorState,
  createNativeProvider, bindCrdt,
} from '@robonen/editor';

const registry = createDefaultRegistry();
const editor = createEditor({ state: createEditorState({ registry, doc: createDoc(blocks) }) });

// Collaboration: bind the editor to a CRDT replica and pipe ops to peers.
const provider = createNativeProvider({ schema: registry.schema, user: { name: 'Alice' } });
bindCrdt(editor, provider);
provider.onLocalOps(bytes => socket.send(bytes));   // any transport
socket.onmessage = bytes => provider.applyUpdate(bytes);

See createEditor, bindCrdt and toggleMark in the API reference for the full surface.