Make your Tiptap editor collaborative in minutes

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

Read the docs

Companies of all sizes and industries use Liveblocks

Liveblocks Yjs

Supercharged Yjs developer experience

Liveblocks Yjs is a real-time persisted data store designed for collaborative text editors such as Notion and Google Docs.

Learn more

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} />;}

Make your Tiptap editor collaborative in minutes

Supercharged Yjs developer experience

Start making your product collaborative with the Liveblocks toolkit today