• 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: November 2024

We’ve released a new Tiptap package for Text Editor, a formatting toolbar for Comments, two different ways to prevent users losing unsychronized changes, and added room permission information to our dashboard.

on December 10th, 2024
What’s new in Liveblocks: November 2024
December 10th, 2024·6 min read
Share article

This November we’ve expanded Text Editor and made some UX improvements.

  • Official Tiptap support - New Text Editor package adding support for Tiptap.
  • Formatting toolbar for Comments - Floating composer options for text styles.
  • Preventing unsaved changes - Two new ways to stop unsynchronized changes.
  • Permission info in dashboard - Check if your rooms are public or private.

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.8 or below, make sure to follow our upgrade guides before updating.

Official Tiptap support

It’s now easier than ever to set up collaborative text documents using our new first-party package for Tiptap, a highly extensible rich-text editor. Text documents are fully-hosted and stored in our highly scalable realtime data store, meaning you just need to import our component to get started.

Our new Text Editor package makes it easy to create an advanced collaborative editor filled with all the features you’ve come to expect from Liveblocks, such as:

  • Collaborative editing - Modify your document in realtime with others.
  • Commenting - Annotate text and leave fully-featured threaded comments.
  • Notifications - Display in-app notifications when users are mentioned.
  • Instant loading - With offline support, no loading spinners are necessary.
  • Multiple editors - Add a number of text editors to one document.
  • AI suggestions - Learn how to add AI suggestions with our Novel example.
  • Fully customizable - Integrate your editor perfectly into any design.

Learn more in our blog post

To learn more, make sure to read our previous blog post: Easy collaborative text editing with Liveblocks Tiptap.

Liveblocks Tiptap blog post

Formatting toolbar for Comments

When composing comments, a contextual formatting toolbar is now shown when selecting text, allowing your users to easily add styles to their comments. Four styles are supported: Bold, italic, ~strikethrough~ and code.

After updating to Liveblocks 2.13, the Composer’s formatting toolbar is enabled by default, but you can optionally disable it with showFormattingControls={false}.

function Component() {  return <Composer showFormattingControls={false} />;}

Primitives toolbar

If you’ve built a custom composer using Comments primitives, new FloatingToolbar and MarkToggle components allow you to create a custom floating toolbar for your app.

<Composer.Form>  <Composer.Editor    components={{      FloatingToolbar: () => (        <Composer.FloatingToolbar className="border bg-white">          <Composer.MarkToggle            mark="bold"            className="bg-gray-100 aria-pressed:bg-gray-300"          >            Bold          </Composer.MarkToggle>          <Composer.MarkToggle            mark="italic"            className="bg-gray-100 aria-pressed:bg-gray-300"          >            Italic          </Composer.MarkToggle>        </Composer.FloatingToolbar>      ),      // ...    }}  /></Composer.Form>

Preventing unsaved changes

Liveblocks synchronizes very quickly, but occasionally, particularly when a user has a poor connection, they will close a browser tab before a change is saved. This could lead to issues such as a reaction not appearing on a comment, a word in a text editor not saving, a thread not being resolved.

To combat this, we’ve come up with two different solutions.

  • useSyncStatus - A new way to show a synchronization badge in your UI.
  • preventUnsavedChanges - Stop users closing tabs while unsynchronized.

useSyncStatus

It’s now easier than ever to create a synchronization badge in your app. We’ve added a new hook which checks every part of Liveblocks (Comments, Text Editor, Notifications, Storage, Yjs) and lets you know whether changes have been saved. You can use this information to create a status badge, such as the one in our Linear-like issue tracker example.

The new hook’s called useSyncStatus and it’s just a few lines of code to create a badge.

import { useSyncStatus } from "@liveblocks/react/suspense";
function StatusBadge() { const syncStatus = useSyncStatus({ smooth: true });
return <div>{syncStatus === "synchronized" ? "✅ Saved" : "🔄 Saving"}</div>;}

Because Liveblocks syncs quickly and often, ordinarily the badge would flash a lot. To account for this, we’ve added a smooth option, which delays changes between states, so your UI isn't distracting. We’re using this in the video above.

preventUnsavedChanges

We’ve added a new option that prevent users from closing tabs with a dialog if there are any unsaved changes. Along with preventing unsynchronized changes in every part of Liveblocks, it additionally prevents users from closing the page when they’ve left unsubmitted text in a Composer.

Prevent unsaved changes dialog

To enable this feature, use the preventUnsavedChanges option in LiveblocksProvider.

function Page() {  return (    <LiveblocksProvider      preventUnsavedChanges={true}      // ...    >      ...    </LiveblocksProvider>  );}

Permission info in dashboard

You can now quickly check if your rooms are public or private on our dashboard, and we’ve added a warning that lets you know if all your rooms are public, to let you know if you’re accidentally exposing your room data.

Why your rooms might be public

If you’re not creating rooms with our Node.js package or REST API, this means we’ve automatically creating rooms for you. Each room created automatically is set to have public permissions, which means that users don’t need authentication to access the room.

To only allow authenticated users, you can easily change permissions on a room, or create a room with private access right from the start.

// Turn an existing room privateconst otherRoom = await liveblocks.updateRoom("my-other-room-id", {  defaultAccesses: [], // Private access});
// Create a new private roomconst room = await liveblocks.createRoom("my-room-id", { defaultAccesses: [], // Private access});

Rooms are only automatically created if you’re using access token authentication, as ID tokens always require you to manually create rooms. Learn more about setting default room permissions with access tokens.

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.8 or below, make sure to follow our upgrade guides before updating.

Contributors

Contributors include:haydenbleaselctnicholaspierrelevaillantnvienimeshnayajusugardariusmarcbouchenoirejrowny

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