Build collaborative text experiences with Liveblocks Yjs

For teams who want to build a collaborative text editing experince, like Google Docs, Liveblocks Yjs is a fully managed, highly scalable realtime data store for Yjs documents.

on September 5th, 2023

Build collaborative text experiences with Liveblocks Yjs

Liveblocks provides two powerful serverless data stores for real-time collaboration: Liveblocks Storage for multiplayer creative tools and Liveblocks 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 built with Liveblocks Yjs below.

What is Yjs you may ask? It’s an open-source CRDT framework 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.

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.

Yjs documents in the Liveblocks dashboard

Yjs triggered webhook events

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

Interact with Yjs documents via REST API

The Liveblocks REST API enables you to retrieve and update Yjs documents. Ideal for syncing data with your own system.

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

Hosted on a robust and highly scalable WebSocket infrastructure

Liveblocks Yjs runs on a WebSocket infrastruture 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.

Getting started

Today, all users can get started with Liveblocks Yjs by using @liveblocks/yjs, our Yjs provider.

$npm i @liveblocks/yjs

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

import { createClient } from "@liveblocks/client";import LiveblocksProvider from "@liveblocks/yjs";import * as Y from "yjs";
const client = createClient({  publicApiKey: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
// Get this with `useRoom` in Reactconst room = client.enter("your-room-id", { initialPresence: {} });const doc = new Y.Doc();
const provider = new LiveblocksProvider(room, doc);