Embed collaborative experiences into your Next.js app

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

Start building for free

Read the docs

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.

Start building for free

Learn more

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