In recent years, [Yjs](https://github.com/yjs/yjs) has grown to be the preferred
way for developers to build collaborative rich text editors owing to its
powerful features such as multiplayer undo/redo, lazy loading subdocuments, and
offline support.

If you’ve already built collaborative experiences with Yjs, then you’ve probably
discovered that integrating it with other parts of your system can be
challenging. Because every update gets stored, Yjs documents can be hard to
index, parse, and tend to grow quickly in size over time.

Today, we’ll dive into the different ways Liveblocks enables developers to
extend Yjs capabilities in order to integrate Yjs data seamlessly into an
exising system.

## Update and retrieve documents with the REST API

Liveblocks provides access to a REST API, and with the
[launch of Liveblocks Yjs](/blog/introducing-liveblocks-yjs) we’ve included some
[new endpoints](/docs/api-reference/rest-api-endpoints#Yjs) specifically for
Yjs.

### Get Yjs documents

With the
[Get Yjs Document API](/docs/api-reference/rest-api-endpoints#get-rooms-roomId-ydoc)
you can retrieve Yjs document data for any given room.

```ts
const roomId = "my-room-name";
fetch(`https://api.liveblocks.io/v2/rooms/${roomId}/ydoc`);
```

The result of the query will be in JSON form—though note that the exact schema
will be different for each editor.

```ts
{
  "my-y-text": "Content of my yText field"
}
```

We also have an API for
[getting a Yjs document as a binary update](/docs/api-reference/rest-api-endpoints#get-rooms-roomId-ydoc-binary).

### Update Yjs documents

It’s possible to update a Yjs document by REST API, using the
[Send a Binary Yjs Update API](/docs/api-reference/rest-api-endpoints#put-rooms-roomId-ydoc).
Here’s a code snippet, showing how it works.

```ts
// Create a Yjs document
const yDoc = new Y.Doc();

// Create your data structures and make your update
const yText = yDoc.getText("my-y-text");
yText.insert(0, "Hello world");

// Encode the document state as an update message
const yUpdate = Y.encodeStateAsUpdate(yDoc);

const roomId = "my-room-name";
await fetch(`https://api.liveblocks.io/v2/rooms/${roomId}/ydoc`, {
  method: "PUT",
  body: yUpdate,
});
```

If you’re interested in using this, make sure to read our full guide on the
topic:

- [Modifying Yjs document data with the REST API](/docs/guides/modifying-yjs-document-data-with-the-rest-api)

## Use Yjs triggered webhook events

We’ve added new Yjs-triggered events to our
[Webhooks](/docs/platform/webhooks#YDocUpdatedEvent) enabling you to
automatically perform custom actions in your back end, such as sending
notifications or saving your data to a database. This can all be implemented
this by listening to the
[`YDocUpdatedEvent`](/docs/platform/webhooks#YDocUpdatedEvent), which runs
whenever a Yjs document is modified.

<Figure highlight={false}>
  <figcaption className="sr-only">
    Yjs webhook events sent to your backend.
  </figcaption>
  <Image
    src="/images/blog/extend-yjs/yjs-webhooks.png"
    alt="Yjs webhook events - YDocUpdatedEvent"
    width={820}
    height={482}
    quality={90}
  />
</Figure>

Our previous webhooks continue to work with Yjs too, for example you can respond
to rooms being [created](/docs/platform/webhooks#RoomCreatedEvent) and
[deleted](/docs/platform/webhooks#RoomDeletedEvent), or users
[entering](/docs/platform/webhooks#UserEnteredEvent) and
[leaving](/docs/platform/webhooks#UserLeftEvent) rooms.

## Synchronizing Yjs document data to databases

When our webhooks and REST API are combined, it makes it easy to synchronize
your Yjs document with a database. Here are some detailed guides on how to
synchronize your Yjs document data to various databases:

- [Synchronize Yjs with PlanetScale MySQL](/docs/guides/how-to-synchronize-your-liveblocks-yjs-document-data-to-a-planetscale-mysql-database)
- [Synchronize Yjs with Vercel Postgres](/docs/guides/how-to-synchronize-your-liveblocks-yjs-document-data-to-a-vercel-postgres-database)
- [Synchronize Yjs with Supabase Postgres](/docs/guides/how-to-synchronize-your-liveblocks-yjs-document-data-to-a-supabase-postgres-database)

This is just one possibility, out platform enables many use cases. For example:

- Parsing document data to notify users mentioned in a document.
- Recording a version history of your documents.
- Indexing your documents for a search form.

For the first time, this is now achievable with ease.

## The most advanced platform for Yjs

Liveblocks is already the most advanced platform for Yjs, yet we have plans to
extend Yjs even further, and we’re busy working on them right now—make sure to
check back soon. We’re excited to see what you build with Liveblocks Yjs.