What’s new in Liveblocks: January 2025

This January we’ve released new toolbars, icons, and better error handling.

• Formatting toolbars - Ready-made, customizable toolbars for Tiptap & Lexical.
• AI toolbar - Rolling out AI Copilots with a smart suggestions toolbar for Tiptap.
• Icon set - We’re now exporting our custom-made icons for you to use yourself.
• New error types - A number of uncommon errors can now be handled.
• Filter threads by absent metadata - Fetch threads without a certain property.
• Great agent experience starts with collaboration - Why it matters for AX.

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

Formatting toolbars

Adding a toolbar to your text editor is now easier than ever with our new customizable components. Make a selection in your Tiptap and Lexical editors to see floating options for formatting your text and adding comments.

In addition, we’re also enabling static toolbars. In the video below, you can see an example of this, along with some custom functionality, such as highlighting and text alignment, added to the toolbar.

To add these toolbars to your app, simply import our pre-built components into your text editor. All styling will match the rest of your Liveblocks components.

// Floats next to selected text<FloatingToolbar editor={editor} />
// Always visible and static<Toolbar editor={editor} />

Find more information under Tiptap components and Lexical components.

Custom options

Both <FloatingToolbar> and <Toolbar> can be extensively customized, allowing you to add new options, remove parts you don’t need, or completely replace the content. For example, below we’re adding an element to the start of the toolbar.

<Toolbar editor={editor} after={<div>Formatting</div>} />

You can go further than this, picking and choosing the elements you require. The toolbar below uses the default block selector (i.e. Text, Heading 1, Heading 2, etc.), then adds a vertical separator and a button with fully custom behavior.

<Toolbar editor={editor}>  <Toolbar.BlockSelector />  <Toolbar.Separator />  <Toolbar.Button    name="Question"    shortcut="CMD+Q"    icon={<Icon.QuestionMark />}    onClick={/* ... */}  /></Toolbar>

Custom buttons and toggles will be styled like the rest of the toolbar, with tooltips and shortcut icons. Here’s a few different ways you can use them.

// Simple text button<Toolbar.Button name="Question" onClick={/* ... */} />
// Using an icon replaces the text in the button<Toolbar.Button  name="Question"  shortcut="CMD+Q"  icon={<Icon.QuestionMark />}  onClick={/* ... */}/>
// Toggle highlighted text in Tiptap<Toolbar.Toggle  name="Highlight"  icon={<div>🖊️</div>}  active={editor?.isActive("highlight") ?? false}  onClick={() => editor?.chain().focus().toggleHighlight().run()}  disabled={!editor?.can().chain().focus().toggleHighlight().run()}/>

You can create a custom toolbar in Tiptap and Lexical.

Updated examples

We’ve updated a number of examples with the new toolbar, such as our Linear-like issue tracker.

Here’s every other example we’ve updated:

• Next.js Starter Kit.
• Advanced collaborative text editor.
• Collaborative text editor.
• Text editor comments.
• Next.js Tiptap editor.

Get started with the new toolbars

Get started now with the new toolbar functionality.

• Tiptap components.
• Lexical components.

AI toolbar

We’ve been working hard on the first stage of AI Copilots this January; our AI toolbar for Text Editor. This toolbar enables customizable AI actions inside Tiptap, allowing users to make quick modifications to their documents.

The toolbar’s currently only available for those that have requested access, and we’re going to start rolling it out to selected partners over the coming days. To add it to your app, simply import AiToolbar.

<AiToolbar editor={editor} />

You can also easily add fully custom prompts to the toolbar, for example below is an option to add emoji to your text.

<AiToolbar  editor={editor}  suggestions={    <AiToolbar.Suggestion prompt="Add emoji" icon={<Icon.Emoji />}>      Emojify    </AiToolbar.Suggestion>  }/>

Learn more under AiToolbar.Suggestion.

Icon set

To aid with creating custom toolbars, we’re now exporting our custom-made Liveblocks icon set, used in our components. This way you can re-use icons that are part of products, such as Comments and Notifications.

Get started by importing Icon into your component. These icons perfectly fit into toolbar buttons, toggles, and suggestions, but can also be used elsewhere.

import { Icon } from "@liveblocks/react-ui";
<Toolbar.Button  name="Question"  shortcut="CMD+Q"  icon={<Icon.QuestionMark />}  onClick={/* ... */}/>;

New error types

We’ve added 15 new error types to Liveblocks, allowing you to gracefully handle any problems in your app with useErrorListener. Here’s an example of a new error, triggered if creating a thread doesn’t work.

useErrorListener(({ context }) => {  switch (context.type) {    case "CREATE_THREAD_ERROR": {      const { roomId, threadId, commentId, body, metadata } = context;      break;    }
    // A number of other errors    // ...  }});

Above, we’re highlighting a CREATE_THREAD_ERROR error—one reason this may occur is if you submit thread metadata that’s too large. Find more information about each error under useErrorListener.

Filter threads by absent metadata

When selecting threads, you can now filter them by the absence of a metadata property. For example, you can now filter threads that do not have a color attribute set in their metadata by setting color: null.

useThreads({  query: {    // Filter any "pinned" threads that don't have a color set    metadata: {      pinned: true,      color: null,    },  },});

Learn more about fetching threads under useThreads.

Great agent experience starts with collaboration

Our CEO, Steven Fabre, recently wrote Great agent experience starts with great collaboration, an article on how agent-compatible collaborative apps will have a huge competitive advantage. In this post, he breaks down why great agent experience (AX) starts with great collaborative products.

Minor changes

Here’s a list of other improvements in our changelog this month.

• Add isTextFormatActive and isBlockNodeActive utilities to Lexical.
• Automatically refresh Comments and Notifications data when the browser window regains focus.
• Improve error message if hooks are accidentally called server-side.
• Fix useLayoutEffect warnings when using React versions lower than 18.3.0 and SSR.
• Fix memory leak in some hooks.
• Fix bug where querying metadata with useThreads() would not always reuse the cache correctly.
• Fix download comments attachments action in text editor view from room detail page.
• Fix bug in Zustand typing in case the multi-argument form of set() is used.
• Dashboard: Allow rate limit configuration for webhook endpoints.
• Examples: Updated Next.js Starter Kit to use the new FloatingToolbar.
• Examples: Updated text editor examples to use the new FloatingToolbar.
• Docs: @liveblocks/node-lexical documentation has been improved.
• Docs: Added missing 409 response to Initialize Storage REST API.
• Docs: Better info on initialStorage values.
• Docs: Typo fixed in custom notification snippet.

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

Contributors

Contributors include:

8 authors