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.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
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:
We’ve also made some other improvements:
user object is now available when
events are received.Start using our updated DevTools with Liveblocks 1.4 now:
@latest version.If you use any other Liveblocks packages, make sure to include those too.
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.
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.
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
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.
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!