---
meta:
  title: "Integrations"
  parentTitle: "Sync"
  description:
    "Official Liveblocks packages for text editors, code editors, flowcharts,
    and state management libraries, plus guides for other tools."
---

Sync integrations connect Storage, LiveText, or Yjs to an existing editor,
canvas, diagram, or state library. Official packages are built and maintained
by Liveblocks, and further below you’ll find guides for connecting other
libraries yourself.

## Official packages [#official-packages]

Each package has full API reference documentation and a get-started guide.

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="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="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="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="ProseMirror"
    href="/docs/api-reference/liveblocks-prosemirror"
    description="@liveblocks/prosemirror"
    visual={<DocsJavascriptIcon />}
  />
  <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="React Flow"
    href="/docs/api-reference/liveblocks-react-flow"
    description="@liveblocks/react-flow"
    visual={<DocsFlowchartIcon className="h-auto w-6" />}
  />
  <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="Redux"
    href="/docs/api-reference/liveblocks-redux"
    description="@liveblocks/redux"
    visual={<DocsReduxIcon />}
  />
  <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" />}
  />
</ListGrid>

## Other libraries [#other-libraries]

These libraries don’t have an official Liveblocks package, but we have guides
for connecting them yourself, typically through
[Liveblocks Yjs](/docs/products/sync/text-editing/yjs) or
[Storage](/docs/products/sync/storage).

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Monaco"
    href="/docs/get-started/yjs-monaco-react"
    description="Connect Monaco through Liveblocks Yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Quill"
    href="/docs/get-started/yjs-quill-react"
    description="Connect Quill through Liveblocks Yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Slate"
    href="/docs/get-started/yjs-slate-react"
    description="Connect Slate through Liveblocks Yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="SuperDoc"
    href="/docs/get-started/yjs-superdoc-react"
    description="Connect SuperDoc through Liveblocks Yjs"
    visual={<DocsYjsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="tldraw"
    href="/docs/get-started/nextjs-tldraw"
    description="Collaborative canvases and whiteboards"
    visual={<DocsCanvasIcon className="h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Handsontable"
    href="/docs/get-started/nextjs-multiplayer-handsontable"
    description="Synchronize cells, selections, and history"
    visual={<DocsTableIcon className="h-auto w-6" />}
  />
</ListGrid>

---

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