---
meta:
  title: "Liveblocks Yjs"
  parentTitle: "Sync engine"
  description:
    "Liveblocks Yjs is a realtime sync engine designed for collaborative text
    editors such as Notion and Google Docs."
---

Liveblocks Yjs is a realtime sync engine designed for building collaborative
text editors such as Notion and Google Docs. Liveblocks permanently stores Yjs
data in each [room](/docs/concepts/how-liveblocks-works#Rooms), handling scaling
and maintenance for you.

<Banner title="Tiptap, BlockNote, Lexical">

If you’re using Tiptap, BlockNote, or Lexical, we recommend using our
[Text Editor plugins](/docs/ready-made-features/multiplayer-editing/text-editor)
instead. These are alternatives to Yjs, with extra features specifically created
for those editors. Yjs is intended for other editors, or for completely custom
solutions.

</Banner>

## Y.Doc

[`Y.Doc`](https://docs.yjs.dev/api/y.doc) is the core data structure used by
Yjs. It is a JSON-like object that represents the state of a collaborative
document. It is used to store the content of the document, and to synchronize it
between clients. In Liveblocks, get the current room’s `Y.Doc` with
[`getYjsProviderForRoom`](/docs/api-reference/liveblocks-yjs#getYjsProviderForRoom).

```ts
import { useRoom } from "@liveblocks/react";
import { getYjsProviderForRoom } from "@liveblocks/yjs";

function App() {
  const room = useRoom();
  // +++
  const yProvider = getYjsProviderForRoom(room);
  const yDoc = yProvider.getYDoc();
  // +++

  // ...
}
```

## Shared types

[Shared types](https://docs.yjs.dev/api/shared-types) in Yjs are CRDT-backed
data structures (like maps, arrays, and text) stored inside a `Y.Doc` that
automatically synchronize and merge changes across multiple clients without
conflicts.

```tsx
import { useRoom } from "@liveblocks/react";
import { getYjsProviderForRoom } from "@liveblocks/yjs";

function App() {
  const room = useRoom();
  const yProvider = getYjsProviderForRoom(room);
  const yDoc = yProvider.getYDoc();

  // +++
  const insertText = useCallback(() => {
    const yText = yDoc.getText("editor"); // Y.Text
    yText.insert(0, "Hello collaborative world");
  }, []);
  // +++

  // +++
  const changeTheme = useCallback(() => {
    const yMap = yDoc.getMap("settings"); // Y.Map
    yMap.set("theme", "dark");
  }, []);
  // +++

  // ...
}
```

## Text and code editor integrations

Liveblocks Yjs integrates with popular text and code editors such as Slate,
Monaco, and CodeMirror. Check our get started guides for more information on
different editors.

<Button asChild>
  <a href="/docs/get-started/multiplayer/text-documents">
    Get started with text editor integrations
  </a>
</Button>

## API Reference

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Yjs"
    href="/docs/api-reference/liveblocks-yjs"
    description="@liveblocks/yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Node.js"
    href="/docs/api-reference/liveblocks-node#Yjs"
    description="@liveblocks/node"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="REST API"
    href="/docs/api-reference/rest-api-endpoints#Yjs"
    description="HTTP endpoints"
    visual={<DocsApiIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Examples using Liveblocks Yjs

<ListGrid columns={2}>
  <ExampleCard
    example={{
      title: "Collaborative Text Editor (Slate)",
      slug: "collaborative-text-editor/nextjs-yjs-slate",
      image: "/images/examples/thumbnails/text-editor.jpg",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Collaborative Text Editor (Quill)",
      slug: "collaborative-text-editor/nextjs-yjs-quill",
      image: "/images/examples/thumbnails/text-editor.jpg",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Collaborative Code Editor",
      slug: "collaborative-code-editor",
      image: "/images/examples/thumbnails/code-editor.jpg",
      advanced: true,
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
</ListGrid>

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).