Real-time collaboration with Yjs

Yjs is widely used for shared editing. This sample wires canvas changes into a Y.Doc and syncs via BroadcastChannel for local demos—production would use WebRTC or a websocket provider.

Deep patterns live in Lesson 20 — Collaboration.

Interactive demo

Use Yjs and BroadcastChannel to simulate collaboration scenarios.

First, monitor changes to the local canvas and synchronize the list of shapes and their property objects to the local Y.Doc:

api.onchange = (snapshot) => {
    const { appState, nodes } = snapshot;
    doc.transact(() => {
        // 写入 Y.Doc
    }, local);
};

Then listen for changes to Y.Doc, distinguishing between local and remote changes via origin. If the change originates locally, send a synchronization message; if it originates remotely, update the canvas content.

doc.on('update', (update, origin) => {
    if (origin === local) {
        channel.postMessage(update);
    }

    if (origin !== local) {
        const nodes = yArray.toArray().map((node) => node.toJSON());
        api.updateNodes(nodes);
    }
});