YjsNode.jsData fetchingStateREST API

How to use your Y.Doc on the server

Using @liveblocks/node, it’s possible to retrieve your Yjs document and use it as a Y.Doc on the server. This is often helpful for retrieving text editor state, and we have some specific guides for this:

Getting your Y.Doc

Using Liveblocks.getYjsDocumentAsBinaryUpdate you can fetch your Yjs data, and place it inside a Y.Doc.

import * as Y from "yjs";import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "",});
export async function POST() {  // Get your Yjs data as a binary update  const update = await liveblocks.getYjsDocumentAsBinaryUpdate("my-room-name");
  // Create a Yjs document  const yDoc = new Y.Doc();
  // Apply the binary update to `yDoc`  Y.applyUpdate(yDoc, new Uint8Array(update));
  // `yDoc` can now be used as you like  // ...}

Note that any changes you make will not be applied to other users, as the Y.Doc is not connected to any providers.

Applying changes

Should you wish to send any changes to your document to other users, you can encode yDoc as a binary update, and use Liveblocks.sendYjsBinaryUpdate to apply the change.

import * as Y from "yjs";import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "",});
export async function POST() {  // Get your Yjs data as a binary update  const update = await liveblocks.getYjsDocumentAsBinaryUpdate("my-room-name");
  // Create a Yjs document  const yDoc = new Y.Doc();
  // Apply the binary update to `yDoc`  Y.applyUpdate(yDoc, new Uint8Array(update));
  // An example of a `yDoc` modification  const yText = yDoc.getText("text");  yText.insert(0, "Hello world");
  // Encode the document state as an update  const yUpdate = Y.encodeStateAsUpdate(yDoc);
  // Send the update to Liveblocks  await liveblocks.sendYjsBinaryUpdate(roomId, yUpdate);}

These changes will be immediately applied to all connected users.

Related guides

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.