---
meta:
  title: "Get started with Liveblocks"
  description: "Select the type of collaborative experience you want to enable in your product, your preferred framework, and technology to learn how to install and configure Liveblocks into your project."
---

# Get started with Liveblocks

Select the type of collaborative experience you want to enable in your product, your preferred framework, and technology to learn how to install and configure Liveblocks into your project.

The list below covers every available get started guide, grouped by collaboration feature. Pick the one that matches your stack and use case.

## Get started with multiplayer

Select the type of content you want people to edit together and your preferred technology to get started with Liveblocks.

- [Tiptap with Next.js](/docs/get-started/nextjs-tiptap.md): Collaborative rich text editing and comment annotations like Google Docs.
- [BlockNote with Next.js](/docs/get-started/nextjs-blocknote.md): Collaborative block-based text editing and comment annotations like Notion.
- [Lexical with Next.js](/docs/get-started/nextjs-lexical.md): Collaborative rich text editing and comment annotations.
- [Tiptap with React](/docs/get-started/react-tiptap.md): Collaborative rich text editing and comment annotations.
- [BlockNote with React](/docs/get-started/react-blocknote.md): Collaborative block-based text editing and comment annotations.
- [Lexical with React](/docs/get-started/react-lexical.md): Collaborative rich text editing and comment annotations.
- [Slate.js with React](/docs/get-started/yjs-slate-react.md): Collaborative rich text editing.
- [Tiptap with Svelte](/docs/get-started/yjs-tiptap-svelte.md): Collaborative rich text editing.
- [Tiptap with Vue.js](/docs/get-started/yjs-tiptap-vuejs.md): Collaborative rich text editing.
- [Tiptap with JavaScript](/docs/get-started/yjs-tiptap-javascript.md): Collaborative rich text editing.
- [Quill with React](/docs/get-started/yjs-quill-react.md): Collaborative rich text editing.
- [Quill with Svelte](/docs/get-started/yjs-quill-svelte.md): Collaborative rich text editing.
- [Quill with Vue.js](/docs/get-started/yjs-quill-vuejs.md): Collaborative rich text editing.
- [Quill with JavaScript](/docs/get-started/yjs-quill-javascript.md): Collaborative rich text editing.
- [CodeMirror with React](/docs/get-started/yjs-codemirror-react.md): Collaborative code editor.
- [CodeMirror with Svelte](/docs/get-started/yjs-codemirror-svelte.md): Collaborative code editor.
- [CodeMirror with Vue.js](/docs/get-started/yjs-codemirror-vuejs.md): Collaborative code editor.
- [CodeMirror with JavaScript](/docs/get-started/yjs-codemirror-javascript.md): Collaborative code editor.
- [Monaco with React](/docs/get-started/yjs-monaco-react.md): Collaborative version of VS Code.
- [Monaco with Svelte](/docs/get-started/yjs-monaco-svelte.md): Collaborative version of VS Code.
- [Monaco with Vue.js](/docs/get-started/yjs-monaco-vuejs.md): Collaborative version of VS Code.
- [Monaco with JavaScript](/docs/get-started/yjs-monaco-javascript.md): Collaborative version of VS Code.
- [React Flow with Next.js](/docs/get-started/nextjs-react-flow.md): Build a collaborative flowchart with React Flow and Next.js.
- [Tldraw whiteboard with Next.js](/docs/get-started/nextjs-tldraw.md): Build a multiplayer whiteboard with Tldraw and Next.js.
- [Realtime avatar and cursor presence with Next.js](/docs/get-started/nextjs-presence.md): Build a custom multiplayer experience with Next.js.
- [Custom multiplayer experience with Next.js](/docs/get-started/nextjs.md): Build a custom multiplayer experience with Next.js.
- [Custom multiplayer experience with React](/docs/get-started/react.md): Build a custom multiplayer experience with React.
- [Custom multiplayer experience with Redux](/docs/get-started/redux.md): Build a custom multiplayer experience with Redux.
- [Custom multiplayer experience with Zustand](/docs/get-started/zustand.md): Build a custom multiplayer experience with Zustand.
- [Custom multiplayer experience with Svelte](/docs/get-started/svelte.md): Build a custom multiplayer experience with Svelte.
- [Custom multiplayer experience with Vue.js](/docs/get-started/vuejs.md): Build a custom multiplayer experience with Vue.js.
- [Custom multiplayer experience with SolidJS](/docs/get-started/solidjs.md): Build a custom multiplayer experience with SolidJS.
- [Custom multiplayer experience with JavaScript](/docs/get-started/javascript.md): Build a custom multiplayer experience with JavaScript.
- [Multiplayer Handsontable spreadsheet with Next.js](/docs/get-started/nextjs-multiplayer-handsontable.md): Build a collaborative Handsontable spreadsheet with Next.js.

## Get started with a commenting experience

Select your preferred framework and technology to learn how to install and configure Liveblocks Comments into your project.

- [Tiptap with Next.js](/docs/get-started/nextjs-tiptap.md): Collaborative rich text editing and comment annotations like Google Docs.
- [BlockNote with Next.js](/docs/get-started/nextjs-blocknote.md): Collaborative block-based text editing and comment annotations like Notion.
- [Lexical with Next.js](/docs/get-started/nextjs-lexical.md): Collaborative rich text editing and comment annotations.
- [Tiptap with React](/docs/get-started/react-tiptap.md): Collaborative rich text editing and comment annotations.
- [BlockNote with React](/docs/get-started/react-blocknote.md): Collaborative block-based text editing and comment annotations.
- [Lexical with React](/docs/get-started/react-lexical.md): Collaborative rich text editing and comment annotations.
- [Draggable comments with Next.js](/docs/get-started/nextjs-comments-canvas.md): Add draggable comment pins to a 2D canvas with Next.js.
- [Inline comments with Next.js](/docs/get-started/nextjs-comments.md): Add inline comment threads to your Next.js app.
- [Inline comments with React](/docs/get-started/react-comments.md): Add inline comment threads to your React app.
- [Commenting inside AG Grid with Next.js](/docs/get-started/nextjs-comments-ag-grid.md): Add pop-up comments to an AG Grid table with Next.js.
- [Commenting inside Handsontable with Next.js](/docs/get-started/nextjs-comments-handsontable.md): Add pop-up comments to a Handsontable spreadsheet with Next.js.
- [Commenting inside a table with Next.js](/docs/get-started/nextjs-comments-table.md): Add pop-up comments to an HTML table with Next.js.

## Get started with AI Collaboration

Browse the upcoming guides for building collaborative AI agents with Liveblocks.

- [Create realtime AI feeds in Next.js](/docs/get-started/nextjs-feeds.md): Build collaborative AI agents and chats with realtime feeds.
- [Create a comments bot with Chat SDK and Next.js](/docs/get-started/nextjs-chat-sdk-bot.md): Add bots and AI agents to your Liveblocks comment threads.

## Get started with AI Copilots

Select your preferred framework to learn how to add a singleplayer AI assistant with Liveblocks.

- [AI Copilot with Next.js](/docs/get-started/nextjs-ai-chat.md): Add a singleplayer AI assistant to your Next.js app.
- [AI Copilot with React](/docs/get-started/react-ai-chat.md): Add a singleplayer AI assistant to your React app.
- [Create realtime AI feeds in Next.js](/docs/get-started/nextjs-feeds.md): Build collaborative AI agents and chats with realtime feeds.
- [Create a comments bot with Chat SDK and Next.js](/docs/get-started/nextjs-chat-sdk-bot.md): Add bots and AI agents to your Liveblocks comment threads.

## Get started with a notifications experience

Select your preferred framework and technology to learn how to install and configure Liveblocks Notifications into your project.

- [In-app inbox with Next.js](/docs/get-started/nextjs-notifications-in-app.md): Add an in-app inbox to your Next.js app.
- [In-app inbox with React](/docs/get-started/react-notifications-in-app.md): Add an in-app inbox to your React app.
- [Email notifications with Next.js](/docs/get-started/nextjs-notifications-email.md): Send email notifications from your Next.js app.
- [Slack notifications with Next.js](/docs/get-started/nextjs-notifications-slack.md): Send Slack notifications from your Next.js app.
- [Microsoft Teams notifications with Next.js](/docs/get-started/nextjs-notifications-microsoft-teams.md): Send Microsoft Teams notifications from your Next.js app.
- [Web Push notifications with Next.js](/docs/get-started/nextjs-notifications-web-push.md): Send Web Push notifications from your Next.js app.
- [Webhook notifications with Next.js](/docs/get-started/nextjs-notifications-webhooks.md): Use webhooks to trigger events in your Next.js app.
- [In-app inbox with Next.js](/docs/get-started/nextjs-notifications-custom-in-app.md): Add an in-app inbox to your Next.js app.
- [Email notifications with Next.js](/docs/get-started/nextjs-notifications-custom-email.md): Send email notifications from your Next.js app.
- [Slack notifications with Next.js](/docs/get-started/nextjs-notifications-custom-slack.md): Send Slack notifications from your Next.js app.
- [Microsoft Teams notifications with Next.js](/docs/get-started/nextjs-notifications-custom-microsoft-teams.md): Send Microsoft Teams notifications from your Next.js app.
- [Web Push notifications with Next.js](/docs/get-started/nextjs-notifications-custom-web-push.md): Send Web Push notifications from your Next.js app.
- [Webhook notifications with Next.js](/docs/get-started/nextjs-notifications-custom-webhooks.md): Use webhooks to trigger events in your Next.js app.

---

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