Liveblocks 1.4: Introducing Yjs DevTools and API improvements

With this release, we've added Yjs to our DevTools extension, enabling you to inspect your Yjs application as you build. We've also improved the events API, and our Node.js package now supports edge environments.

on October 3rd, 2023

Liveblocks 1.4: Introducing Yjs DevTools and API improvements

With Liveblocks 1.4, we’ve enabled support for Liveblocks Yjs in our DevTools browser extension. For the first time, you can now inspect different parts of your Yjs app live in the browser, as you build. You can:

View the document’s content
Read awareness data
Inspect document changes

Other improvements

We’ve also made some other improvements:

New DevTools panel for observing events.
The sender’s user object is now available when events are received.
@liveblocks/node now supports edge environments.

Upgrade now

Start using our updated DevTools with Liveblocks 1.4 now:

Download the updated extension for your chosen browser.
Update each Liveblocks package in your project to the @latest version.

$npm install @liveblocks/client@latest @liveblocks/react@latest @liveblocks/yjs@latest liveblocks/node@latest

If you use any other Liveblocks packages, make sure to include those too.

View the document’s content

If you select the Yjs tab in the DevTools, you’ll find the default is the Document view. In here, you can view the entire Yjs document in JSON form.

Each editor stores data in a different form, though you’ll find it’s often XML data within JSON properties.

Read awareness data

The second view available is Awareness. This provides insight into each user’s Yjs awareness information; temporary data that’s shared whilst clients are connected.

Awareness is often used in Yjs applications to store cursor locations in text documents, along with other user information.

Inspect document changes

In the final view, Changes, you’ll notice that it’s now possible to view a live list of updates to the current Yjs document, such as additions and deletions.

The DevTools also provide a flowchart diagram, helping you understand which user made each change, and how they relate to each other.

Observing events

In addition to the Yjs changes, you can now see a log of events sent with Liveblocks Broadcast since connecting to the room.

Events are often used for triggering realtime actions in other clients, for example requesting others revalidate their API data, sending realtime toast notifications, or broadcasting play/pause commands in a media app.