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.

on
What's new in Liveblocks: August 2024

This August we significantly improved our dashboard, along with other changes.

Upgrade now

To use the latest features, update your packages with the following command.

$npx create-liveblocks-app@latest --upgrade

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.

New room detail page navigation in the Liveblocks dashboard

Enhancements include:

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.

function HeaderAvatars() {  // `true` if inside a Liveblocks room, `false` otherwise  const isInsideRoom = useIsInsideRoom();
if (!isInsideRoom) { return null; }
return <LiveAvatars />;}
function LiveAvatars() { const others = useOthers(); return others.map((other) => <img src={other.info.picture} />);}

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.

function Tags() {  // `true` if inside a Liveblocks room, `false` otherwise  const insideRoom = useInsideRoom();
return insideRoom ? <LiveTags /> : <StaticTags />;}
function LiveTags() { const tags = useStorage((root) => root.tags);
// ...}
function StaticTags() { const { data: tags } = useSWR("/api/get-tags-from-storage");
// ...}

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.

const { data: unreadInboxNotifications } =  await liveblocks.getInboxNotifications({    userId: "steven@example.com",    query: {      unread: true,    },  });

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.

Loading

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.

Loading

Upgrade

To use the latest features, update your packages with the following command.

$npx create-liveblocks-app@latest --upgrade

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

Contributors include:ctnicholassugardariuspierrelevaillantstevenfabrenimeshnayajumarcbouchenoireteddarificassaadhalabi

8 authors

Ready to get started?

Join developers who use Liveblocks to build world‑class collaborative experiences.

Start building for free