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

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

Document

Data stores for collaborative editors

Liveblocks Document is a set of persisted data stores optimized for real-time collaborative documents.

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;

Shared collaborative state for Zustand

Show who’s in a document

Data stores for collaborative editors

Start making your product collaborative with the Liveblocks toolkit today