Make your Monaco editor collaborative in minutes

Liveblocks enables you to add real-time syncing and multiplayer features to your Monaco editor with Yjs, a real‑time 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 real-time persisted data store designed for collaborative text editors such as Notion and Google Docs.

import * as Y from "yjs";import LiveblocksProvider from "@liveblocks/yjs";import { useRoom } from "@/liveblocks.config";import { useCallback, useEffect, useState } from "react";import { Editor } from "@monaco-editor/react";import { editor } from "monaco-editor";import { MonacoBinding } from "y-monaco";import { Awareness } from "y-protocols/awareness";
// Collaborative text editor with simple rich text, live cursors, and live avatarsexport function CollaborativeEditor() { const [editorRef, setEditorRef] = useState<editor.IStandaloneCodeEditor>(); const room = useRoom();
// Set up Liveblocks Yjs provider and attach Monaco editor useEffect(() => { let yProvider: any; let yDoc: Y.Doc; let binding: MonacoBinding;
if (editorRef) { yDoc = new Y.Doc(); const yText = yDoc.getText("monaco"); yProvider = new LiveblocksProvider(room, yDoc);
// Attach Yjs to Monaco binding = new MonacoBinding( yText, editorRef.getModel() as editor.ITextModel, new Set([editorRef]), yProvider.awareness as Awareness ); }
return () => { yDoc?.destroy(); yProvider?.destroy(); binding?.destroy(); }; }, [editorRef, room]);
const handleOnMount = useCallback((e: editor.IStandaloneCodeEditor) => { setEditorRef(e); }, []);
return ( <Editor onMount={handleOnMount} height="100vh" width="100hw" theme="vs-light" defaultLanguage="typescript" defaultValue="" options={{ tabSize: 2, }} /> );}

Start making your product collaborative with the Liveblocks toolkit today