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:
Other improvements
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.
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
@latestversion.
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.
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.
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!
