Zustand

Shared collaborative state for Zustand

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

Sign up for free
Read the docs

Companies of all sizes and industries use Liveblocks

Presence

Show who’s in a document

Add presence features to your product to make people feel like they’re together in the same room.

Sign up for free
Learn more
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

Shared real‑time document state

Use conflict‑free data types to enable people to edit the same document in real‑time.

Sign up for free
Learn more
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;

Start making your product collaborative with the Liveblocks toolkit today

Sign up for free