Liveblocks provides two powerful serverless data stores for real-time
collaboration: [Liveblocks Storage](/document/storage) for multiplayer creative
tools and [Liveblocks Yjs](/document/yjs) for collaborative text editing.
Liveblocks Yjs is a fully managed, highly scalable data store that lets you
build Google Docs-style editors in days instead of months. Check out our
[open-source demo](/examples/collaborative-text-editor-advanced/nextjs-tiptap-advanced)
built with Liveblocks Yjs below.

<div className="relative my-8 flex flex-col gap-2 rounded-xl bg-marketing-surface-faded-subtle p-2 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle md:my-10">
  <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <Embed
      src="https://nextjs-tiptap-advanced.liveblocks.app"
      className="absolute origin-top-left"
      style={{
        width: `${1.25 * 100}%`,
        height: `${1.25 * 100}%`,
        transform: `scale(${1 / 1.25})`,
      }}
    />
  </div>
  <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <Embed
      src="https://nextjs-tiptap-advanced.liveblocks.app"
      className="absolute origin-top-left"
      style={{
        width: `${1.25 * 100}%`,
        height: `${1.25 * 100}%`,
        transform: `scale(${1 / 1.25})`,
      }}
    />
  </div>
</div>

What is Yjs you may ask? It’s
[an open-source CRDT framework](https://github.com/yjs/yjs) created by Kevin
Jahns that has grown to be the preferred way for developers to build
collaborative rich text editors. It comes with powerful features such as
multiplayer undo/redo, lazy loading subdocuments, and offline support. And
thanks to its incredible community, Yjs already has integrations with the most
popular open-source text and code editor frameworks out there: Lexical, Tiptap,
Slate, Quill, CodeMirror, Monaco, and more.

The challenge though is that the decentralized nature of Yjs makes it difficult
to scale for production applications. Since all updates get stored, Yjs
documents tend to get big really fast. Plus, the raw Yjs data requires some
heavy engineering lifting to be dealt with.

That’s why we’ve created Liveblocks Yjs, the world’s most advanced platform for
building, hosting, and scaling Yjs applications. No configuration, no
maintenance required.

<YouTube id="C5eD0LzgAr0" />

## Supercharged Yjs developer experience

It’s fair to say that developer experience is close to our heart so it was
important to us that Yjs integrated seamlessly into the Liveblocks ecosystem
you’re already used to: dashboard, DevTools, webhooks, REST API, and more.

### A centralized hub for Yjs documents

Enable anyone on your team to view, inspect, and manage, stored Yjs documents
from the [Liveblocks dashboard](/monitoring-dashboard).

<Figure highlight={false}>
  <Image
    src="/images/blog/introducing-yjs/yjs-dashboard.png"
    alt="Yjs documents in the Liveblocks dashboard"
    width={820}
    height={482}
    quality={90}
  />
</Figure>

### Yjs triggered webhook events

[Webhook events](/docs/platform/webhooks#YDocUpdatedEvent) are triggered as
users edit Yjs documents, enabling you to automatically perform custom actions
in your back end, such as sending notifications, saving your data to a database,
or indexing for search.

<Figure highlight={false}>
  <Image
    src="/images/blog/introducing-yjs/yjs-webhooks.png"
    alt="Yjs webhook events - YDocUpdatedEvent"
    width={820}
    height={482}
    quality={90}
  />
</Figure>

### Interact with Yjs&nbsp;documents via REST API

The
[Liveblocks REST API](/docs/api-reference/rest-api-endpoints#get-rooms-roomId-ydoc)
enables you to retrieve and update Yjs documents. Ideal for syncing data with
your own system.

```
https://api.liveblocks.io/v2/rooms/{roomId}/ydoc
https://api.liveblocks.io/v2/rooms/{roomId}/ydoc-binary
```

## Hosted on a robust and highly scalable WebSocket infrastructure

Liveblocks Yjs runs on a
[WebSocket infrastruture](/docs/platform/websocket-infrastructure) where Yjs
documents are stored in edge regions close to your users, reducing latency and
improving end-user performance while enabling you to scale effortlessly.
Liveblocks also manages awareness and WebSocket connections automatically, so
you don’t have to.

<Figure highlight={false}>
  <Image
    src="/images/blog/introducing-yjs/infrastructure.png"
    alt="Liveblocks WebSocket infrastructure"
    width={820}
    height={482}
    quality={90}
  />
</Figure>

## Getting started

Today, all users can get started with Liveblocks Yjs by using
[`@liveblocks/yjs`](/docs/api-reference/liveblocks-yjs), our Yjs provider.

```bash
npm i @liveblocks/yjs
```

This is how to set up your Yjs provider in JavaScript—attach this to your chosen
editor to enable multiplayer.

```ts
import { createClient } from "@liveblocks/client";
import LiveblocksProvider from "@liveblocks/yjs";
import * as Y from "yjs";

const client = createClient({
  publicApiKey: "{{SECRET_KEY}}",
});

// Get this with `useRoom` in React
const room = client.enter("your-room-id", { initialPresence: {} });
const doc = new Y.Doc();

const provider = new LiveblocksProvider(room, doc);
```

### Start with a guide

We recommend you start with a guide. We’ve written specific guides for each
popular text and code editor.

- [Get started with a collaborative text editor](/docs/get-started/text-editor)
- [Get started with a collaborative code editor](/docs/get-started/code-editor)

We also have some [more advanced Yjs guides](/docs/guides?technologies=yjs)
focused around building more features into your app.

### Try our examples

Along with our guides, we now have open-source examples for each editor,
including the live demo posted in this article.

- [Text editor examples](/examples/browse/text-editor)
- [Code editor examples](/examples/browse/code-editor)

You can also try the [Liveblocks Starter Kit for Next.js](/starter-kit) which
now includes a collaborative text editor powered by Liveblocks Yjs.

## Moving forward

We wouldn’t be here without the awesome work from
[Kevin Jahns](https://twitter.com/kevin_jahns) and the Yjs community. Liveblocks
is now a sponsor, and we’ll continue to invest in Yjs, furthering our aim of
connecting people together, and
[building a more collaborative web](/docs/concepts/why-liveblocks).