Embed collaborative experiences into your Next.js app

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

Get started for free
Read the docs
Companies of all sizes and industries use Liveblocks

Multiplayer -
Add realtime collaboration to your product experience

Let users co-edit text and manipulate data simultaneously, in realtime—just like Figma or Notion.

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

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

Learn more