Playground

Live @robonen/writekit 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 writekit…

How it's wired

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

import {
  WritekitRoot, WritekitContent, WritekitRemoteCursors,
  createDefaultRegistry, createDoc, createWritekit, createWritekitState,
  createNativeProvider, bindCrdt,
} from '@robonen/writekit';

const registry = createDefaultRegistry();
const writekit = createWritekit({ state: createWritekitState({ registry, doc: createDoc(blocks) }) });

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

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