Post

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

Chris Nicholas

@chrisnicholas.dev

1 Sept

Storage is the main building block, a primitive for storing multiplayer state. It comes with conflict-free data types such as `LiveObject`, which is similar to a JS object that multiple users can edit simultaneously For example, here's how a slideshow app might be constructed.

Chris Nicholas

@chrisnicholas.dev

In React, you can read and edit Storage values with two hooks. 1. `useStorage`: Return a plain JSON representation of your data. 2. `useMutation`: Edit your data with live structures. Combining these allows you to, for example, render your slides, and add a "New slide" button.

1/9/26, 2:51 pm0 reposts1 like

Chris Nicholas

@chrisnicholas.dev

1 Sept

Another feature is presence. Connected users can show their activity, like with cursors, selections around elements, or an avatar in a stack.

Chris Nicholas

@chrisnicholas.dev

1 Sept

`useOthers` allows you to show other users presence in real-time, for example this is how to create a live avatar stack.

Chris Nicholas

@chrisnicholas.dev

1 Sept

More complex presence need `useUpdateMyPresence`, allowing you to attach live JSON values to users. For example, you can add an outline to a `textarea`, when a user selects it, by giving each user a `selection: string | null` value, representing the box they're editing.

Chris Nicholas

@chrisnicholas.dev

1 Sept

Agents can collaborate too, using server-side methods like `mutateStorage`. Trigger these from chats, buttons, comments, or wherever you choose. AI can show its presence too, as it makes changes, and it'll appear in `useOthers`.