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);

Storage -
Sync engine for creative tools

Liveblocks Storage is a realtime sync engine designed for multiplayer creative tools such as Figma, Pitch, and Spline.

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;

Add collaboration to your product today

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