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

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

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

Storage - Sync engine for creative tools

Yjs - Sync engine for text editors

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

Storage -
Sync engine for creative tools

Yjs -
Sync engine for text editors

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