Embed collaborative experiences into your JavaScript app

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

Sign up for free
Read the docs

Companies of all sizes and industries use Liveblocks

Presence

Show who’s in a document

Add presence features to your product to make people feel like they’re together in the same room.

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

Storage

Shared real‑time document state

Use conflict‑free data types to enable people to edit the same document in real‑time.

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

Start making your product collaborative with the Liveblocks toolkit today

Sign up for free