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.

Start today for free
Read the docs
Companies of all sizes and industries use Liveblocks

Multiplayer Editing -
Add realtime collaboration to your product experience

Let users co-edit text and manipulate data simultaneously, in realtime—just like Figma or Notion.

Start today for free
Learn more
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,        },      }}    />  );}

Turn your product into the space where people and AI collaborate

Start today for free
Book a demo