Embed collaborative experiences into your React 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 RoomProvider  const 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 provider  const yDoc = new Y.Doc();  const yProvider = new LiveblocksProvider(room, yDoc);

Add collaboration to your product today

Start building for free