• DocsDocs
  • PricingPricing
Book a demo
Sign in
Sign in
Book a demo
    • Ready-made features
      • AI Copilots
        AI Copilots

        In-app AI agents that feel human

      • Comments
        Comments

        Contextual commenting

      • Multiplayer Editing
        Multiplayer Editing

        Realtime collaboration

      • Notifications
        Notifications

        Smart alerts for your app

      • Presence
        Presence

        Realtime presence indicators

    • Platform
      • Monitoring Dashboard
        Monitoring Dashboard

        Monitor your product

      • Realtime Infrastructure
        Realtime Infrastructure

        Hosted WebSocket infrastructure

    • Tools
      • Examples

        Gallery of open source examples

      • Next.js Starter Kit

        Kickstart your Next.js collaborative app

      • DevTools

        Browser extension for debugging

      • Tutorial

        Step-by-step interactive tutorial

      • Guides

        How-to guides and tutorial

    • Company
      • Blog

        The latest from Liveblocks

      • Customers

        The teams Liveblocks empowers

      • Changelog

        Weekly product updates

      • Security

        Our approach to security

      • About

        The story and team behind Liveblocks

  • Docs
  • Pricing
  • Ready-made features
    • AI Copilots
    • Comments
    • Multiplayer Editing
    • Notifications
    • Presence
    Platform
    • Monitoring Dashboard
    • Realtime Infrastructure
    Solutions
    • People platforms
    • Sales tools
    • Startups
    Use cases
    • Multiplayer forms
    • Multiplayer text editor
    • Multiplayer creative tools
    • Multiplayer whiteboard
    • Comments
    • Sharing and permissions
    • Document browsing
  • Resources
    • Documentation
    • Examples
    • React components
    • DevTools
    • Next.js Starter Kit
    • Tutorial
    • Guides
    • Release notes
    Technologies
    • Next.js
    • React
    • JavaScript
    • Redux
    • Zustand
    • Yjs
    • Tiptap
    • BlockNote
    • Slate
    • Lexical
    • Quill
    • Monaco
    • CodeMirror
  • Company
    • Pricing
    • Blog
    • Customers
    • Changelog
    • About
    • Contact us
    • Careers
    • Terms of service
    • Privacy policy
    • DPA
    • Security
    • Trust center
    • Subprocessors
  • HomepageSystem status
    • Github
    • Discord
    • X
    • LinkedIn
    • YouTube
    © 2025 Liveblocks Inc.
Blog/Updates

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 September 5th, 2024
What's new in Liveblocks: August 2024
September 5th, 2024·5 min read
Share article

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.

$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:

  • 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.

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

Product updates

Ready to get started?

Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.

Book a demo

Related blog posts

  • What's new in Liveblocks: August 2025

    What's new in Liveblocks: August 2025

    Picture of Chris Nicholas
    September 17th
    Updates
  • What’s new in Liveblocks: July 2025

    What’s new in Liveblocks: July 2025

    Picture of Chris Nicholas
    August 5th
    Updates
  • What’s new in Liveblocks: June 2025

    What’s new in Liveblocks: June 2025

    Picture of Chris Nicholas
    July 15th
    Updates