Sync engine - Liveblocks Yjs

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, handling scaling and maintenance for you.

Y.Doc

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.

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 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.

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.

API Reference

• Yjs

  @liveblocks/yjs

• Node.js

  @liveblocks/node

• REST API

  HTTP endpoints

Examples using Liveblocks Yjs

• 

  Collaborative Text Editor (Slate)

  Next.js
• 

  Collaborative Text Editor (Quill)

  Next.js
• 

  Collaborative Code EditorAdvanced

  Next.js