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.
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:
- New DevTools panel for observing events.
- The sender’s
userobject is now available when events are received.
- @liveblocks/node now supports edge environments.
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
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.
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.
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.
The DevTools also provide a flowchart diagram, helping you understand which user made each change, and how they relate to each other.
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 real-time actions in other clients, for example requesting others revalidate their API data, sending real-time 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!