This June we released Liveblocks 2.0, text editor packages, and plenty of
content:

- [Liveblocks 2.0](#liveblocks-2-0): The platform for adding collaboration in
  days, not months.
- [Lexical packages](#lexical-packages): Text Editor packages enabling
  collaboration & server edits.
- [New examples](#new-examples): Get started with Lexical and custom
  notifications.
- [New hooks](#new-hooks): Delete threads and display Storage synchronization
  indicators.
- [Figma kit](#figma-kit): Interactive components for designing your product in
  Figma.

## Liveblocks 2.0 [#liveblocks-2-0]

Liveblocks 2.0 marked the release of our four core products, each enabling a
different aspect of collaboration: [Comments](/comments),
[Notifications](/notifications), [Text Editor](/text-editor), and
[Realtime APIs](/sync-datastore).

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/liveblocks-2-0.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

You can learn all about our new products in our
[Introducing Liveblocks 2.0 blog post](/blog/introducing-liveblocks-2-0), and if
you’d like more technical information, make sure to read the Products section in
our [documentation](/docs).

### TypeScript improvements

A large part of the new update is the TypeScript improvements, which makes
handling types easier than before. In Liveblocks 2.0 you now define a
`<LiveblocksProvider>`, instead of creating a client.

```tsx
// ❌ Before
const client = createClient(/* options */);

// ✅ After
<LiveblocksProvider /* options */>
  <App />
</LiveblocksProvider>;
```

You then define your types in your config file, and import the hooks from our
package. These types are automatically shared across _all_ Liveblocks packages,
even on Node.js, not just the React package.

```ts file="liveblocks.config.ts"
// ❌ Before
export const {
  suspense: {
    RoomProvider,
    useRoom,
    // etc
  },
} = createRoomContext<Presence, Storage>(client);

// ✅ After
declare global {
  interface Liveblocks {
    Presence: Presence;
    Storage: Storage;
  }
}
```

```ts file="MyComponent.tsx"
// ❌ Before: get hooks exported from your Liveblocks config
import { RoomProvider, useRoom, ... } from "./liveblocks.config";

// ✅ After: import hooks directly
import { RoomProvider, useRoom, ... } from "@liveblocks/react";
import { RoomProvider, useRoom, ... } from "@liveblocks/react/suspense";
```

### Tutorial rewrite [#tutorial-rewrite]

We have a full interactive tutorial that teaches you the concepts behind setting
up your collaborative React application, and we’ve just rewritten it to support
Liveblocks 2.0.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-liveblocks-june-24/tutorial.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Each page guides you through a different facet of setting up your app, and using
basic Liveblocks features. Get started with our
[interactive tutorial](https://liveblocks.io/docs/tutorial/react/getting-started/welcome)
now.

### Upgrade guide

We’ve also made a number of other changes too, such as renaming packages, and
APIs. To get Liveblocks 2.0, make sure to read our
[upgrade guide](/docs/platform/upgrading/2.0).

## Lexical packages [#lexical-packages]

As part of our new Text Editor product, we’ve released new packages for
[Lexical](https://lexical.dev). The first package,
[`@liveblocks/react-lexical`](https://liveblocks.io/docs/api-reference/liveblocks-react-lexical),
allows you to easily create, or convert your existing Lexical editor, into a
collaborative text editor with real-time editing, mentions, comments, and
notifications.

```tsx highlight="5-7"
export function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin contentEditable={<ContentEditable />} />
      <LiveblocksPlugin>
        <FloatingComposer className="floating-composer" />
      </LiveblocksPlugin>
    </LexicalComposer>
  );
}
```

The second package,
[`@liveblocks/node-lexical`](https://liveblocks.io/docs/api-reference/liveblocks-node-lexical),
allows you to connect to the editor from the server, and make changes in
real-time, for example adding a new paragraph.

```ts highlight="5-9"
await withLexicalDocument(
  { roomId: "my-room-id", client: liveblocks },
  async (doc) => {
    await doc.update(() => {
      // Adding a "hello world" paragraph to your editor
      const root = $getRoot();
      const paragraphNode = $createParagraphNode();
      paragraphNode.append($createTextNode("Hello world"));
      root.append(paragraphNode);
    });
  }
);
```

This API mirrors the client API for Lexical, and all changes occur in real-time.

## New examples [#new-examples]

We’ve released two new examples in June, for Text Editor and Notifications, and
you can try live demos of both below.

### Lexical text editor

Our new
[Next.js Lexical example](/examples/collaborative-text-editor/nextjs-lexical)
shows you how to set up a collaborative rich-text editor with inline mentions,
comments and notifications, powered by Liveblocks.

<div className="relative my-8 flex flex-col gap-2 rounded-xl bg-marketing-surface-faded-subtle p-2 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle md:my-10">
  <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <Embed
      src="https://nextjs-notion-like-ai-editor.liveblocks.app/"
      className="absolute origin-top-left"
      style={{
        width: `${1.2 * 100}%`,
        height: `${1.2 * 100}%`,
        transform: `scale(${1 / 1.2})`,
      }}
    />
  </div>
</div>

This example uses our
[Text Editor package for Lexical](https://liveblocks.io/docs/products/text-editor/lexical),
which we released as part of Liveblocks 2.0.

### Custom notifications

Our new
[Next.js custom notifications example](/examples/notifications-custom/nextjs-notifications-custom)
guides you through triggering custom notifications on the server, before
rendering custom React components to match.

<div className="relative my-8 flex flex-col gap-2 rounded-xl bg-marketing-surface-faded-subtle p-2 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle md:my-10">
  <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <Embed
      src="https://nextjs-notifications-custom.liveblocks.app/"
      className="absolute origin-top-left"
      style={{
        // As zoomed as possible with side by side panels
        width: `${1.32 * 100}%`,
        height: `${1.32 * 100}%`,
        transform: `scale(${1 / 1.32})`,
      }}
    />
  </div>
</div>

This example uses our [Notifications product](/docs/products/notifications).

## New hooks [#new-hooks]

In Liveblocks 2.1 we released two new hooks, one for Comments and one for
Storage.

### useDeleteThread

The new
[`useDeleteThread`](https://liveblocks.io/docs/api-reference/liveblocks-react#useDeleteThread)
hook can be used to delete a thread and all its associated comments.

```tsx
function DeleteThread({ thread }) {
  const deleteThread = useDeleteThread();

  return (
    <button onClick={() => deleteThread(thread.id)}>🗑️ Delete thread</button>
  );
}
```

Only the creator of the thread can call the function.

### useStorageStatus

The
[`useStorageStatus`](https://liveblocks.io/docs/api-reference/liveblocks-react#useStorageStatus)
is a hook that returns whether local Storage changes have been synchronized or
not. This is helpful for building a status badge in your application, that tells
users if their changes have been saved or not.

```tsx
function StatusBadge() {
  const status = useStorageStatus();

  return <div>{status === "synchronized" ? "✅ Saved" : "🔄 Saving..."}</div>;
}
```

We’ll soon be enabling a similar UI pattern in our
[Text Editor package for Lexical](/docs/products/text-editor/lexical).

## Figma kit [#figma-kit]

We recently released the Liveblocks Collaboration Kit for Figma, a set of UI
elements to help you visualize what a collaborative version of your product
would look like.

<Figure>
  <Image
    src="/images/blog/liveblocks-collaboration-kit-for-figma/liveblocks-collaboration-kit-for-figma.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

Learn more in our
[blog post which introduces the Liveblocks Collaboration Kit](/blog/introducing-liveblocks-collaboration-kit-for-figma).

## More information

This post is a summary of June’s changes, make sure to read our
[Changelog](/changelog) to learn about every change we’ve made, no matter how
minor.

## Contributors

<Contributors
  gitHubUsernames={[
    "adigau",
    "ctnicholas",
    "guillaumesalles",
    "flowflorent",
    "jrowny",
    "marcbouchenoire",
    "nimeshnayaju",
    "nvie",
    "ofoucherot",
    "pierrelevaillant",
    "stevenfabre",
    "matthewlipski",
  ]}
/>