Make your Tiptap editor collaborative in minutes

Liveblocks enables you to add realtime syncing and multiplayer features to your Tiptap editor with Yjs, a realtime data store designed for collaborative text editors.

Companies of all sizes and industries use Liveblocks
Liveblocks Yjs

Supercharged Yjs developer experience

Liveblocks Yjs is a realtime sync engine designed for collaborative text editors such as Notion and Google Docs.

import { useEditor, EditorContent } from '@tiptap/react'import StarterKit from '@tiptap/starter-kit'import Collaboration from '@tiptap/extension-collaboration'import CollaborationCursor from '@tiptap/extension-collaboration-cursor'import * as Y from 'yjs'import LiveblocksProvider from "@liveblocks/yjs";
type EditorProps = { doc: Y.Doc, provider: any;}
function Editor() { const room = useRoom(); const [doc, setDoc] = useState<Y.Doc>(); const [provider, setProvider] = useState<any>();
// Set up Liveblocks Yjs provider useEffect(() => { const yDoc = new Y.Doc(); const yProvider = new LiveblocksProvider(room, yDoc); setDoc(yDoc); setProvider(yProvider);
return () => { yDoc?.destroy(); yProvider?.destroy(); }; }, [room]);
if (!doc || !provider) { return null; }
return <TiptapEditor doc={doc} provider={provider} />;}

Add collaboration to your product today