What's new in Liveblocks: August 2024
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.
This August we significantly improved our dashboard, along with other changes.
- Dashboard enhancements: Improved observability and developer experience.
- Conditionally render parts: Use the same components inside & outside rooms.
- Fetch unread notifications: Create email notifications more easily.
- Better search dialog: Docs search has more results and is more accurate.
- Improved canvas examples: Polished up draggable Comments examples.
Upgrade now
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.
Dashboard enhancements
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.
Dashboard blog post
We’ve made so many improvements in this area, that we’ve written a whole blog post just to highlight them.
Enhancements include:
- Search, sort, and filter rooms - Find and debug your rooms more easily.
- Room detail improvements - Delete rooms and added information.
- New Comments view - Sort & delete threads and comments visually.
- Text Editor preview - Preview editor content, annotations, threads.
- Broadcast events - Send custom events directly to your rooms.
- API snippets - Pre-filled code for modifying and retrieving rooms.
- Webhook error tracking - View failed webhook responses from your back end.
Conditionally render parts
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.
Fetch unread notifications
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
.
Better search dialog
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.
Improved canvas examples
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.
Upgrade
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.
More information
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
8 authors
Ready to get started?
Join developers who use Liveblocks to build world‑class collaborative experiences.