Shared collaborative state for Zustand

Liveblocks empowers developers to embed performant collaborative features to any product in just days.

Companies of all sizes and industries use Liveblocks

Liveblocks Presence -
Show who’s in a document

Liveblocks Presence enables you to add things like live avatars and cursors to you product.

import create from "zustand";import { createClient } from "@liveblocks/client";import { middleware } from "@liveblocks/zustand";
const client = createClient({ /* ... */ });
const useStore = create( middleware( (set) => ({ cursor: { x: 0, y: 0 }, setCursor: (cursor) => set({ cursor }) }), { client, // cursor is shared to other users in the room presenceMapping: { cursor: true } } ));
// Get others people in the roomconst others = useStore(state => state.liveblocks.others);
// And get their cursorsconst othersCursors = others .map(user => user.presence?.cursor);

Multiplayer Editing -
Realtime collaboration

Let users co-edit text and manipulate data simultaneously, in realtime—just like Figma or Notion.

import create from "zustand";import { createClient } from "@liveblocks/client";import { middleware } from "@liveblocks/zustand";
const client = createClient({ /* ... */ });
const useStore = create( // Enhance your store and controls which parts // of your states are synced and persisted middleware( (set) => ({ scientist: { firstName: "Ada", lastName: "Lovelace", }, setScientist: (scientist) => set({ scientist }) }), { client, // scientist is synced across clients storageMapping: { scientist: true }, } ));
export default useStore;

Turn your product into the space where people and AI collaborate

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.