Make your Quill editor collaborative in minutes

Liveblocks enables you to add realtime syncing and multiplayer features to your Quill 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 Quill from "quill";import ReactQuill from "react-quill";import QuillCursors from "quill-cursors";import { QuillBinding } from "y-quill";import * as Y from "yjs";import LiveblocksProvider from "@liveblocks/yjs";import { useRoom } from "@/liveblocks.config";import { useCallback, useEffect, useRef, useState } from "react";
Quill.register("modules/cursors", QuillCursors);
// Collaborative text editor with simple rich text, live cursors, and live avatarsexport function CollaborativeEditor() { const room = useRoom(); const [text, setText] = useState<Y.Text>(); const [provider, setProvider] = useState<any>();
// Set up Liveblocks Yjs provider useEffect(() => { const yDoc = new Y.Doc(); const yText = yDoc.getText("quill"); const yProvider = new LiveblocksProvider(room, yDoc); setText(yText); setProvider(yProvider);
return () => { yDoc?.destroy(); yProvider?.destroy(); }; }, [room]);
if (!text || !provider) { return null; }
return <QuillEditor yText={text} provider={provider} />;}
type EditorProps = { yText: Y.Text; provider: any;};
function QuillEditor({ yText, provider }: EditorProps) { const reactQuillRef = useRef<ReactQuill>(null);
// Set up Yjs and Quill useEffect(() => { let quill; let binding: QuillBinding;
if (!reactQuillRef.current) { return; }
quill = reactQuillRef.current.getEditor(); binding = new QuillBinding(yText, quill, provider.awareness); return () => { binding?.destroy?.(); }; }, [yText, provider]);
return ( <ReactQuill placeholder="Start typing here…" ref={reactQuillRef} theme="snow" modules={{ cursors: true, history: { // Local undo shouldn't undo changes from remote users userOnly: true, }, }} /> );}

Add collaboration to your product today