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

Liveblocks Storage -
Sync engine for creative tools

Liveblocks Storage is a realtime sync engine designed for multiplayer creative tools such as Figma, Pitch, and Spline.

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) }      />    </>  );}

Liveblocks Yjs -
Sync engine for text editors

Liveblocks Yjs is a realtime sync engine designed for collaborative text editors such as Notion and Google Docs.

Start building 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

Liveblocks Storage - Sync engine for creative tools

Liveblocks Yjs - Sync engine for text editors

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

Liveblocks Storage -
Sync engine for creative tools

Liveblocks Yjs -
Sync engine for text editors

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