Build amazing real‑time collaborative products

import { LiveList, LiveObject } from "@liveblocks/client";
import {
  useStorage,
  useMyPresence,
  useOthers,
} from "./liveblocks.config";

// Pass these to RoomProvider
const initialPresence = { selectedShape: null };
const initialStorage = {
  shapes: new LiveList([
    new LiveObject({ x: -60, y: 0, bg: "#FF2868" }),
    new LiveObject({ x: 60, y: 0, bg: "#FF7A00" }),
  ]),
};

// Shape data updating in real-time
const shapes = useStorage(root => root.shapes);
// => [{ x: -60, y: 0, bg: "#FF2868" },
//     { x: 60, y: 0, bg: "#FF7A00" }]

// Share your presence as easily as using a useState
const [myPresence, setMyPresence] = useMyPresence();
setMyPresence({ selectedShape: "shapeId" });

// Get others people presence (cursors,
// avatar, name, etc) with a single line of code
const others = useOthers()