---
meta:
  title: "Documentation"
  description:
    "Explore the documentation to learn how to build collaborative experiences
    with Liveblocks."
showTitle: false
---

<DocsHomepageHero
  title="Documentation"
  description="Liveblocks provides the realtime infrastructure to handle concurrent edits on shared data, so people and AI agents can collaborate without breaking your app."
  actions={[
    {
      title: "Get started",
      href: "/docs/get-started",
      appearance: "primary",
    },
    {
      title: "Copy prompt",
      type: "copy-get-started-prompt",
    },
  ]}
/>

<DocsHomepageGrid />

## Products

Discover each Liveblocks product and how to use it.

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Sync"
    href="/docs/products/sync"
    description="Synchronize collaborative application state"
    visual={<DocsStorageIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Comments"
    href="/docs/products/comments"
    description="Add contextual threads, mentions, and reactions"
    visual={<DocsMentionIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Notifications"
    href="/docs/products/notifications"
    description="Deliver inbox, email, and custom notifications"
    visual={<DocsEmailIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Use cases

Explore different use cases for Liveblocks, and where to start with each.

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Agentic users"
    href="/docs/use-cases/agentic-users"
    description="Humans and agents working together"
    visual={<DocsAiCollaborationIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="AI activity feed"
    href="/docs/use-cases/ai-activity-feed"
    description="Agent runs, live statuses, streaming updates"
    visual={<DocsAiActivityFeedIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Canvas"
    href="/docs/use-cases/canvas"
    description="Whiteboards, design tools, spatial interfaces"
    visual={<DocsCanvasIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Chat"
    href="/docs/use-cases/chat"
    description="Chat, support, communities, AI messages"
    visual={<DocsChatIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Code editor"
    href="/docs/use-cases/code-editor"
    description="Code editing with CodeMirror and Monaco"
    visual={<DocsCodeEditorIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Comments"
    href="/docs/use-cases/comments"
    description="Reviews, feedback, annotations, discussions"
    visual={<DocsMentionIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Custom app"
    href="/docs/use-cases/custom-app"
    description="Build with Liveblocks collaboration primitives"
    visual={<DocsCustomAppIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Flowchart"
    href="/docs/use-cases/flowchart"
    description="Workflows, diagrams, process maps"
    visual={<DocsFlowchartIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Forms"
    href="/docs/use-cases/forms"
    description="Multiplayer fields, live focus, AI autofill"
    visual={<DocsFormsIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Inbox"
    href="/docs/use-cases/inbox"
    description="Inboxes, unread badges, emails, settings"
    visual={<DocsInboxIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Presence"
    href="/docs/use-cases/presence"
    description="Cursors, avatars, selections, live activity"
    visual={<DocsSyncPresenceIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Share dialog"
    href="/docs/use-cases/share-dialog"
    description="Invites, roles, teams, public access"
    visual={<DocsShareDialogIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Slideshow"
    href="/docs/use-cases/slideshow"
    description="Presentations, pitch decks, collaborative slides"
    visual={<DocsSlideshowIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Spreadsheet"
    href="/docs/use-cases/spreadsheet"
    description="Spreadsheets, tables, grids, databases"
    visual={<DocsTableIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Text editor"
    href="/docs/use-cases/text-editor"
    description="Rich-text editing with Tiptap, Lexical, more"
    visual={<DocsTextEditorIcon className="h-auto w-6" />}
  />
</ListGrid>

## Examples

Browse and download live code examples from our [example gallery](/examples).

{/* TODO, add more relevant examples */}

<ListGrid columns={2}>
  <ExampleCard
    example={{
      title: "AI Popup Chat",
      slug: "ai-popup/nextjs-ai-popup",
      image: "/images/examples/thumbnails/ai-popup.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "AI Chats",
      slug: "ai-chats/nextjs-ai-chats",
      image: "/images/examples/thumbnails/ai-chats.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Advanced Collaborative Text Editor",
      slug: "collaborative-text-editor-advanced/nextjs-tiptap-advanced",
      image: "/images/examples/thumbnails/text-editor-advanced.jpg",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Comments Notifications",
      slug: "comments-notifications",
      image: "/images/examples/thumbnails/comments-notifications.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Live Cursors",
      slug: "live-cursors",
      image: "/images/examples/thumbnails/live-cursors.jpg",
    }}
    technologies={["nextjs", "vuejs", "sveltekit", "solidjs", "javascript"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Collaborative Whiteboard",
      slug: "collaborative-whiteboard-advanced",
      image:
        "/images/examples/thumbnails/collaborative-whiteboard-advanced.jpg",
      advanced: true,
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
</ListGrid>

## API Reference

Read detailed [API references](/docs/api-reference) for Liveblocks packages,
REST API, and webhook events.

<ListGrid columns={2} defaultVisibleItems={6}>
  <DocsCard
    type="technology"
    title="React"
    href="/docs/api-reference/liveblocks-react"
    description="@liveblocks/react"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React UI"
    href="/docs/api-reference/liveblocks-react-ui"
    description="@liveblocks/react-ui"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React Tiptap"
    href="/docs/api-reference/liveblocks-react-tiptap"
    description="@liveblocks/react-tiptap"
    visual={<DocsTiptapIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="React BlockNote"
    href="/docs/api-reference/liveblocks-react-blocknote"
    description="@liveblocks/react-blocknote"
    visual={
      <DocsBlocknotejsIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
  <DocsCard
    type="technology"
    title="React Flow"
    href="/docs/api-reference/liveblocks-react-flow"
    description="@liveblocks/react-flow"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="CodeMirror"
    href="/docs/api-reference/liveblocks-codemirror"
    description="@liveblocks/codemirror"
    visual={<DocsCodeEditorIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="ProseMirror"
    href="/docs/api-reference/liveblocks-prosemirror"
    description="@liveblocks/prosemirror"
    visual={<DocsJavascriptIcon />}
  />
  <DocsCard
    type="technology"
    title="React Lexical"
    href="/docs/api-reference/liveblocks-react-lexical"
    description="@liveblocks/react-lexical"
    visual={<DocsLexicalIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Node.js ProseMirror"
    href="/docs/api-reference/liveblocks-node-prosemirror"
    description="@liveblocks/node-prosemirror"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Node.js Lexical"
    href="/docs/api-reference/liveblocks-node-lexical"
    description="@liveblocks/node-lexical"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="JavaScript"
    href="/docs/api-reference/liveblocks-client"
    description="@liveblocks/client"
    visual={<DocsJavascriptIcon />}
  />
  <DocsCard
    type="technology"
    title="Redux"
    href="/docs/api-reference/liveblocks-redux"
    description="@liveblocks/redux"
    visual={<DocsReduxIcon />}
  />
  <DocsCard
    type="technology"
    title="Zustand"
    href="/docs/api-reference/liveblocks-zustand"
    description="@liveblocks/zustand"
    visual={
      <img
        alt=""
        src="/assets/zustand.png"
        width={24}
        height={24}
        loading="lazy"
      />
    }
  />
  <DocsCard
    type="technology"
    title="Yjs"
    href="/docs/api-reference/liveblocks-yjs"
    description="@liveblocks/yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Node.js"
    href="/docs/api-reference/liveblocks-node"
    description="@liveblocks/node"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Node.js Emails"
    href="/docs/api-reference/liveblocks-emails"
    description="@liveblocks/emails"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Chat SDK adapter"
    href="/docs/api-reference/liveblocks-chat-sdk-adapter"
    description="@liveblocks/chat-sdk-adapter"
    visual={<DocsRobotIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Python"
    href="/docs/api-reference/liveblocks-python"
    description="Python SDK"
    visual={<DocsPythonIcon />}
  />
  <DocsCard
    type="technology"
    title="REST API"
    href="/docs/api-reference/rest-api-endpoints"
    description="HTTP endpoints"
    visual={<DocsApiIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Webhook events"
    href="/docs/api-reference/webhook-events"
    description="HTTP webhook event types"
    visual={<DocsApiIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Community

<ListGrid columns={3}>
  <DocsCard
    title="X"
    href="https://x.com/liveblocks"
    description="Follow us on X for the latest news and updates."
    visual={<DocsXIcon />}
    openInNewWindow
  />
  <DocsCard
    title="Discord"
    href="https://liveblocks.io/discord"
    description="Join hundreds of developers building with Liveblocks."
    visual={<DocsDiscordIcon />}
    openInNewWindow
  />
  <DocsCard
    title="GitHub"
    href="https://github.com/liveblocks/liveblocks"
    description="Follow progress and contribute to the codebase."
    visual={<DocsGithubIcon />}
    openInNewWindow
  />
</ListGrid>

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).
