Embed collaborative experiences into your JavaScript app

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

Document

Data stores for collaborative editors

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

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

Embed collaborative experiences into your JavaScript app

Show who’s in a document

Data stores for collaborative editors

Start making your product collaborative with the Liveblocks toolkit today