We've significantly enhanced our dashboard, alongside other changes, such as conditionally rendering Liveblocks hooks, fetching unread notifications, a better search dialog, and improved Comments examples.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
This August we significantly improved our dashboard, along with other changes.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.1 or below, make sure to follow our upgrade guides before updating.
In the past month we’ve made a huge amount of enhancements to our dashboard, helping improve observability and developer experience. For example, you can now visualize Comments and Text Editor state directly in the dashboard.
We’ve made so many improvements in this area, that we’ve written a whole blog post just to highlight them.
Enhancements include:
When building a collaborative React application, it can be helpful to re-use components both inside and outside Liveblocks rooms. For example in a Liveblocks document, a header bar could display a live avatar stack of every connected user, but outside the document, you won’t need it.
Previously, it wasn’t possible to conditionally render Liveblocks hooks in this
way, but we’ve added a new hook that makes this much easier,
useIsInsideRoom.
Below, we’re only rendering <LiveAvatars /> inside Liveblocks rooms.
Along with hiding components completely,
useIsInsideRoom can
also be used to render alternative parts. Let’s say you have an interactive list
of tags built with Storage.
Outside of rooms, you could instead render non-interactive data, for example
with a data-fetching library instead, such as SWR.
When fetching inbox notifications in your back end, you can now filter by unread notifications, making it easier than before to create email notifications, or render from your back end.
As you can see above, this is made possible by passing an unread query option
to
liveblocks.getInboxNotifications.
We’ve taken time to upgrade the search dialog in our documentation—it now searches through more of our website, and is much better at finding results.
Make sure to try it out next time you’re developing, you can open it with
Cmd/Ctrl + K or by pressing the input at the top right of the docs.
It’s particularly helpful as it can search through headings on each page, and
will scroll down to the exact section you need.
We’ve spent some time polishing our canvas-based Comments examples, showing you how to take care of various edge cases, such as flipping comments before they go off the edge of the screen. You can try a live demo of our Next.js Canvas Comments example below, a simple example using x/y coordinates.
We’ve similarly improved Next.js Overlay Comments, a complex example which demonstrates how you might attach comments to any HTML elements, or website, enabling preview comments.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.1 or below, make sure to follow our upgrade guides before updating.
This post is a summary of August’s changes, make sure to read our Changelog to learn about every change we’ve made, no matter how minor.
Contributors include:
8 authors
