Embed collaborative experiences into your JavaScript app

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

Start building for free

Read the docs

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.

Start building for free

Learn more

import { createClient, LiveList } from "@liveblocks/client";
const client = createClient({  publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const room = client.enter("your-room-id", { initialPresence: {} });
const container = document.getElementById("root-container");
room.subscribe("others", (others) => {  if (others.count === 0) {    container.innerHTML = "You're the only one here.";  } else if (others.count === 1) {    container.innerHTML = "There is one other person here.";  } else {    container.innerHTML = "There are " + others.count + " other people here.";  }});

Liveblocks Storage

Sync engine for creative tools

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

Start building for free

Learn more

import { createClient, LiveList } from "@liveblocks/client";
const client = createClient({  publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const room = client.enter("your-room-id", {  initialPresence: { isTyping: false },  initialStorage: { todos: new LiveList([]) },});
const whoIsHere = document.getElementById("who_is_here");const todoInput = document.getElementById("todo_input");const someoneIsTyping = document.getElementById("someone_is_typing");
const { root } = await room.getStorage();
let todos = root.get("todos");

Add collaboration to your product today

Start building for free