Real-time collaboration in an ASP.NET Core rich text editor

Two people in one document want to see each other's work as it happens. RichTextBox connects to Yjs, the widely used open-source library for shared editing, through an API of its own.

What you provide

Yjs and its provider are peer dependencies: the package does not include them, and you load them from npm or a CDN. You also host the connection point, such as a y-websocket server.

Attach the editor

import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

const ydoc = new Y.Doc();
const provider = new WebsocketProvider("wss://collab.example.com", documentId, ydoc);

const editor = window.richTextBoxEditors.Body;
editor.collab.attach({
    doc: ydoc,
    provider: provider,
    user: { id: currentUser.id, name: currentUser.name, color: "#2563eb" }
});

Turn the feature on in the page with enable-collab="true".

The other calls

editor.collab.detach();
editor.collab.isAttached();
editor.collab.peers();          // who else is here
editor.collab.setUser(user);    // change identity during a session

What is shared

Live cursors, presence, and the review ledger, which holds comments, tracked changes and AI suggestions. Try the demo, where two editors on one page share a document.

Your responsibilities

Who may join. Your collaboration server must check that the user may open this document, using your own login.
Saving. Decide who writes the final document to your database, and clean it on the server as usual.
Testing. Always test with two real browsers, since a single browser tab hides most sharing problems.