Product updates

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.

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:

Viewing Yjs DevTools features

Other improvements

We’ve also made some other improvements:

Upgrade now

Start using our updated DevTools with Liveblocks 1.4 now:

  1. Download the updated extension for your chosen browser.
  2. 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.

Viewing the entire Yjs document in the DevTools

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.

Viewing Yjs awareness in the DevTools

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.

Viewing the changes list in the Yjs DevTools

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

Viewing the changes diagram in the Yjs DevTools

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.

Observing events in the DevTools

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.

Get started with Yjs

If you’d like to get started with Liveblocks Yjs, make sure to read our guides.

Remember to upgrade your packages to start using the DevTools!