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.

Start today for free

Learn more

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

Learn more

Embed collaborative experiences into your Next.js app

Multiplayer Editing - Add realtime collaboration to your product experience

Presence - Bring realtime presence indicators to your product

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

Multiplayer Editing -
Add realtime collaboration to your product experience

Presence -
Bring realtime presence indicators to your product

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