Liveblocks React UI

Field note

What it does

Overview Get started Concepts Authentication Collaboration features Multiplayer Comments Notifications AI Collaboration AI Copilots Integrations Overview Bolt Claude Code Claude Desktop Codex Cursor Lovable n8n Neon PlanetScale Replit Supabase v0 Platform Pricing Tools Upgrading API Reference @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-flow @liveblocks/codemirror @liveblocks/prosemirror @liveblocks/react-tiptap @liveblocks/react-blocknote @liveblocks/node-prosemirror @liveblocks/react-lexical @liveblocks/lexical @liveblocks/node-lexical @liveblocks/redux @liveblocks/zustand @liveblocks/yjs @liveblocks/node @liveblocks/emails @liveblocks/chat-sdk-adapter Python SDK REST API Troubleshooting Documentation API Reference @liveblocks/react-blocknote @liveblocks/react-blocknote Copy page @liveblocks/react-blocknote provides you with a React plugin that adds collaboration to any BlockNote rich-text editor . It also adds realtime cursors, document persistence on the cloud, comments, and mentions. Use @liveblocks/node-prosemirror for server-side editing. Setup To set up your collaborative BlockNote editor, create an editor with useCreateBlockNoteWithLiveblocks and pass it into the BlockNoteView component provided by @blocknote/mantine . import { useCreateBlockNoteWithLiveblocks } from "@liveblocks/react-blocknote" ; import { BlockNoteView } from "@blocknote/mantine" ; function TextEditor ( ) { const editor = useCreateBlockNoteWithLiveblocks ( { } ) ; return ( < div > < BlockNoteView editor = { editor } /> </ div > ) ; } Liveblocks BlockNote components should be passed editor to enable them. import { useCreateBlockNoteWithLiveblocks , FloatingComposer , } from "@liveblocks/react-blocknote" ; import { BlockNoteView } from "@blocknote/mantine" ; function TextEditor ( ) { const editor = useCreateBlockNoteWithLiveblocks ( { } ) ; return ( < div > < BlockNoteView editor = { editor } /> < FloatingComposer editor = { editor } style = { { width : "350px" } } /> </ div > ) ; } Learn more in our get started guides . Default components FloatingComposer Displays a Composer near the current BlockNote selection, allowing you to create threads. < FloatingComposer editor = { editor } /> Submitting a comment will attach an annotation thread at the current selection.

Capabilities

Available capabilities

Tags

Tags

Ways to use it

Ways to use it