Embed collaborative experiences into your Next.js app

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

Companies of all sizes and industries use Liveblocks

Multiplayer Editing -
Add realtime collaboration to your product experience

Let users co-edit text and manipulate data simultaneously, in realtime—just like Figma or Notion.

import { LiveObject } from "@liveblocks/client";import { useStorage, useMutation } from "./liveblocks.config";
// Pass these to RoomProviderconst initialStorage = { scientist: new LiveObject({ firstName: "Ada", lastName: "Lovelace", }),};
export default function Form() { const scientist = useStorage(root => root.scientist);
const update = useMutation(({ storage }, field, value) => { storage.get('scientist').set(field, value); }, []);
return ( <> <input value={scientist.firstName} onChange={(e) => { update("firstName", e.target.value) } /> <input value={scientist.lastName} onChange={(e) => { update("lastName", e.target.value) } /> </> );}

Presence -
Bring realtime presence indicators to your product

Easily integrate presence indicators like live cursors and avatar stacks to create a shared, realtime experience.

import * as Y from "yjs";import { createClient } from "@liveblocks/client";import LiveblocksProvider from "@liveblocks/yjs";
const client = createClient({ publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const { room, leave } = client.enterRoom("your-room-id", { initialPresence: {},});
// Create Yjs document and providerconst yDoc = new Y.Doc();const yProvider = new LiveblocksProvider(room, yDoc);

Next.js Starter Kit -
Kickstart your Next.js collaborative app

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.