index.mdx

---
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: "Browse examples",
      href: "/examples",
    },
  ]}
/>

<DocsHomepageGrid />

## Collaboration features

<ListGrid columns={2}>
  <DocsCardFeature
    feature="multiplayer"
    href="/docs/collaboration-features/multiplayer"
  />
  <DocsCardFeature
    feature="comments"
    href="/docs/collaboration-features/comments"
  />
  <DocsCardFeature
    feature="notifications"
    href="/docs/collaboration-features/notifications"
  />
  <DocsCardFeature
    feature="ai-collaboration"
    href="/docs/collaboration-features/ai-collaboration"
  />
  <DocsCardFeature
    feature="ai-copilots"
    href="/docs/collaboration-features/ai-copilots"
  />
</ListGrid>

## API Reference

<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={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React BlockNote"
    href="/docs/api-reference/liveblocks-react-blocknote"
    description="@liveblocks/react-blocknote"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React Flow"
    href="/docs/api-reference/liveblocks-react-flow"
    description="@liveblocks/react-flow"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React Lexical"
    href="/docs/api-reference/liveblocks-react-lexical"
    description="@liveblocks/react-lexical"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="Node.js ProseMirror"
    href="/docs/api-reference/liveblocks-node-prosemirror"
    description="@liveblocks/node-prosemirror"
    visual={<DocsNodejsIcon />}
  />
  <DocsCard
    type="technology"
    title="Node.js Lexical"
    href="/docs/api-reference/liveblocks-node-lexical"
    description="@liveblocks/node-lexical"
    visual={<DocsNodejsIcon />}
  />
  <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 />}
  />
  <DocsCard
    type="technology"
    title="Node.js Emails"
    href="/docs/api-reference/liveblocks-emails"
    description="@liveblocks/emails"
    visual={<DocsNodejsIcon />}
  />
  <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" />}
  />
</ListGrid>

## 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>

## 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>