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.

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