Real-time collaboration.
Three people editing one document, with live carets, selections and comments. Take someone offline, keep typing, and watch their work merge when they reconnect.
Simulated in your browser. The three editors sync through an authority running in this page, with 30ms of artificial latency. In your app they connect to the Node server you host.
Try this.
- Type in Ana’s window and watch Ben and Chiara’s copies update
- Select a word in one window to see the highlight in the others
- Select text and press the comment button to start a thread
- Take Ben offline, edit in two windows, then bring him back
The code.
import { createRichTextEditor } from '@better-rich-text/core';
import { CollabClient, PresenceLayer, WebSocketTransport, collabPlugin } from '@better-rich-text/collab-client';
const editor = createRichTextEditor('#editor', { plugins: [collabPlugin] });
const client = new CollabClient(editor.editor, {
documentId: 'brief-42',
transport: new WebSocketTransport({ url: 'wss://collab.example.com/brief-42' }),
token: sessionToken,
});
new PresenceLayer(editor.view, client);