Embed collaborative experiences into your JavaScript app

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

Get started for free
Read the docs
Companies of all sizes and industries use Liveblocks

Presence with Sync -
Show who's in a document

Liveblocks Sync lets you add live avatars, cursors, and other presence to your product.

Get started 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.";  }});

Sync -
The sync engine for the agentic web

Liveblocks Sync is the sync engine for the agentic web—conflict-free collaborative editing for people and AI agents, with realtime presence, persistence, and ready-made integrations.

Get started 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");

Turn your product into the space where people and AI collaborate

Get started for free
Contact sales