Shared collaborative state for Redux

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 { createStore } from "redux";import { createClient } from "@liveblocks/client";import { enhancer } from "@liveblocks/redux";
const client = createClient({ /* ... */ });
const initialState = { cursor: { x: 0, y: 0 }}
const store = createStore( (state = initialState, action) => { /* ... */ }, enhancer({ client, // cursor is shared to other users in the room presenceMapping: { cursor: true } }));
// Get others people in the roomconst others = store.getState().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 { createStore } from "redux";import { createClient } from "@liveblocks/client";import { enhancer } from "@liveblocks/redux";
const client = createClient({ /* ... */ });
const initialState = { scientist: { firstName: "Ada", lastName: "Lovelace" }}
export const store = createStore( (state = initialState, action) => { /* ... */ }, // Enhance your store and controls which parts // of your states are synced and persisted enhancer({ client, // scientist is synced across clients storageMapping: { scientist: true } }));

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.