Last week, we completed our second launch week. Every day, we released something
new. Added up, they make Liveblocks the complete toolkit to build world-class
collaborative products:

- [Day 1: Liveblocks 1.0](#day-1)
- [Day 2: Starter Kit](#day-2-starter-kit)
- [Day 3: Webhooks and schema validation](#day-3-webhooks-and-schema-validation)
- [Day 4: DevTools](#day-4-devtools)
- [Day 5: Comments](#day-5-comments)

## Day 1: Liveblocks 1.0 [#day-1]

<YouTube id="T5eoM9d2WU8" />

On day 1 of our launch week, we announced Liveblocks 1.0. It’s packed with
improvements, an updated brand, and marks the end of the storage beta—our
conflict‑free data types solution. Let’s look at some of those improvements
below.

### A new pricing based on monthly active users [#mau-pricing]

Liveblocks’s mission is to connect people where they work so they can move
faster, together. Our previous connection-based pricing was hard to predict for
our customers, and didn’t reflect the value Liveblocks provided to them. **With
Liveblocks 1.0, you’ll now be charged based on your product’s monthly active
users.**

The `userId` generally comes from your database or your authentification
provider. One unique `userId` corresponds to one monthly active user, whether
they connected to a room one day for five minutes or kept coming back every day
for eight hours.

Once you’ve updated your Liveblocks packages to 1.0.0, you’ll be able to
identify unique users through the `userId` property in the
[`authorize`](/docs/api-reference/liveblocks-node#authorize) method of the
[`@liveblocks/node`](/docs/api-reference/liveblocks-node) package.

```ts
const response = await authorize({
  room,
  secret,
  // Your user’s unique identified from your database
  userId: "123",
  userInfo: {
    name: "Ada Lovelace",
    color: "red",
  },
});
```

If you cannot identify users with a unique `userId`, Liveblocks will generate a
cookie with a unique `userId` for anonymous users. This means that as long as
they remain on the same browser, they’ll always count for one monthly active
user, even if they reloaded the page multiple times.

And of course, localhost users are not included in your billing.

### Decreased minimum throttle value [#throttle-value]

To offer your users a smoother live cursor experience, we’ve updated our
packages to decrease the minimum throttle time. You can now set the throttle
value down to 16ms, enabling your users to get updates 60 times per second.
Goodbye interpolation; you won’t need to animate your users’ cursor position
with this approach!

```ts
import { createClient } from "@liveblocks/client";

const client = createClient({
  throttle: 16, // ← 16ms / 60fps
});
```

If you’re interested in learning more about cursor animation, check out this
interactive article on
[how to animate multiplayer cursors](/blog/how-to-animate-multiplayer-cursors).

### Team support and single sign-on [#team-support-and-sso]

The Liveblocks dashboard is an essential part of our product as it is the place
where you can monitor usage, roll new API keys, browse rooms, and more. With
1.0, we added single sign-on options with Google and GitHub, as well as the
ability to invite members to your Liveblocks team account.

<Slideshow
  slides={[
    {
      width: 672,
      height: 376,
      imageUrl: "/images/blog/launch-week-wrap-up-feb-23/team.png",
    },
    {
      width: 672,
      height: 376,
      imageUrl: "/images/blog/launch-week-wrap-up-feb-23/sso.png",
    },
  ]}
/>

## Day 2: Starter Kit [#day-2-starter-kit]

On day 2, we launched the [Liveblocks Starter Kit](/starter-kit) to help
developers kickstart their Next.js collaborative apps in minutes. It only takes
one command-line to get it up and running.

```bash
npx create-liveblocks-app@latest --next
```

The Starter Kit enables you to focus on your core product by providing all the
table-stake features collaborative products we all know and love have in common:

- A workspace to browse and organize documents—including groups and private
  drafts
- The foundation of a customizable Figma-like realtime collaborative editor
- A share dialog with groups and user read/write permissions
- Real-time updates throughout the app—so your users won’t ever need to refresh
  again

<YouTube id="pA2nQXzswhs" />

The Liveblocks Starter Kit is built with TypeScript, Next.js, NextAuth, Radix,
CSS, and Vercel’s SWR. We designed the Starter Kit with flexibility and
customization in mind, so you can easily make it look and feel like your
product, not an afterthought.

- [Learn more about the Starter Kit](/starter-kit)
- [Watch live demo on YouTube](https://youtu.be/Lf7HQ4Z_Ovc)

## Day 3: Webhooks and schema validation [#day-3-webhooks-and-schema-validation]

On day 3, we introduced webhooks and schema validation—two important features to
build robust collaborative products that integrate seamlessly into an existing
system.

### Webhooks [#webhooks]

We often heard that you wanted to synchronize Liveblocks storage to your own
database. Webhooks make this possible at scale without the need for cumbersome
cron jobs to manually retrieve data from each room.

<Figure highlight={false}>
  <figcaption className="sr-only">
    Video displaying webhooks events sent to your backend.
  </figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/launch-week-wrap-up-feb-23/liveblocks-webhooks.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

With webhooks, you can automatically call an HTTP endpoint in your backend when
Liveblocks events are triggered. For instance, here is what a `storageUpdated`
event looks like:

```ts
const storageUpdatedEvent = {
  type: "storageUpdated",
  data: {
    appId: "my-app-id",
    roomId: "my-room-id",
    updatedAt: "2021-10-06T01:45:56.558Z",
  },
};
```

Possibilities are endless with webhooks events. We can’t wait to see what you
create with this functionality.

- [Learn more about webhooks](/docs/platform/webhooks)

### Schema validation [#schema-validation]

We know how important it is to ensure that the data structure provided to
Liveblocks storage is valid, and that you can trust all clients to keep data
integrity. It’s essential for building robust, reliable, and future‑proof
applications. That’s why we just opened the **schema validation** private beta.

<Figure>
  <figcaption className="sr-only">
    Liveblocks schema validation animation
  </figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/launch-week-wrap-up-feb-23/liveblocks-schema-validation.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

You can now attach a schema to a room to reject invalid storage modifications,
allowing you to prevent corrupted data from being loaded from the server. Schema
validation also enables you to write migration scripts for your storage data,
making it possible for your collaborative product to evolve over time.

```ts
type Logo {
  name: String
  theme: String
}

type Storage {
  logo: LiveObject<Logo>
}
```

Defining a schema for your storage is done through a schema definition similar
to how you would describe types in TypeScript.

- [Sign up for the waitlist](https://forms.gle/SxKFBjq9rBTDVbnw5)

## Day 4: DevTools [#day-4-devtools]

On day 4, we released [Liveblocks DevTools](/devtools), a browser extension to
inspect collaborative experiences built with Liveblocks. DevTools is available
on
[Chrome](https://chrome.google.com/webstore/detail/liveblocks-devtools/iiagocfmmhknpdalddkbiejnfmbmlffk),
[Firefox](https://addons.mozilla.org/en-US/firefox/addon/liveblocks-devtools/),
and
[Edge](https://microsoftedge.microsoft.com/addons/detail/liveblocks-devtools/hfecmmnilleegmjaegkjjklnjbgadikg).

<YouTube id="-z2wUN_Fic4" />

With DevTools, you can inspect the storage data structures and presence in
realtime. Plus, it was designed to feel right at home in your browser, no matter
what theme you use.

- [Learn more about DevTools](/devtools)
- [Watch live demo on YouTube](https://youtu.be/-6Jxejp0iuw)

## Day 5: Comments [#day-5-comments]

On day 5, we opened up registration for the [Comments private beta](/comments).
With Comments, you can embed a customizable commenting experience into your
product to enable your users to collect feedback.

<Figure>
  <Image
    src="/images/blog/launch-week-wrap-up-feb-23/liveblocks-announcing-comments-private-beta.png"
    alt="E2E test of multiplayer todo list"
    width={672}
    height={378}
    quality={70}
  />
</Figure>

As developers and designers ourselves, we know how important it is for the
experience to look, feel, and work like your own product, not an afterthought.
That’s why the first version of comments comes in the form of unstyled and
accessible React components for building high-quality commenting experiences
that feel like your product.

We’d love to partner with you if you’re a design-driven company looking to add
an excellent commenting experience to your product.

- [Learn more about comments](/comments)
- [Sign up for the waitlist](https://forms.gle/xgp54aTMsoH8hrjU9)

---

## Looking forward [#looking-forward]

<Figure>
  <Image
    src="/images/blog/launch-week-wrap-up-feb-23/liveblocks-looking-forward.png"
    alt="Liveblocks - looking forward illustration"
    width={672}
    height={378}
    quality={70}
  />
</Figure>

This launch week marked a significant milestone for the company as it represents
the foundation we’ll build upon for years to come:

**Liveblocks gets you to production faster.** We designed the
[Starter Kit](/starter-kit) and [comments](/comments) to reduce the effort
required to implement collaborative features. We’ll continue to invest in
pre-made UI components to give you the space to focus on what’s important for
your business: creating a unique product offering that brings value to your
users.

**Liveblocks is there as you scale.** With the additions of
[webhooks](/docs/platform/webhooks) and schema validation, you can build robust
solutions that scale with you as you grow. Liveblocks is the realtime
collaboration infrastructure you can rely on to build impactful products used by
millions.

**Liveblocks keeps developer experience at heart.** With our updated
documentation and [DevTools](/devtools), building world‑class collaborative
experiences people love to use has never been easier. We’ll continue to make
Liveblocks the best developer experience possible because a great developer
experience leads to better products.

Feel free to reach out with feedback, questions, and feature requests on our
[Discord channel](https://liveblocks.io/discord). We’re here to build the
collaborative tools you need, and we’d love for you to help us shape them.