Make your CodeMirror editor collaborative in minutes

Liveblocks enables you to add realtime syncing and multiplayer features to your CodeMirror 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 * as Y from "yjs";import { yCollab } from "";import { EditorView, basicSetup } from "codemirror";import { EditorState } from "@codemirror/state";import { javascript } from "@codemirror/lang-javascript";import { useCallback, useEffect, useState } from "react";import LiveblocksProvider from "@liveblocks/yjs";import { useRoom } from "@/liveblocks.config";import styles from "./Editor.module.css";
export default function Editor() { const [element, setElement] = useState<HTMLElement>(); const room = useRoom();
const ref = useCallback((node: HTMLElement | null) => { if (!node) return;
setElement(node); }, []);
useEffect(() => { let provider: LiveblocksProvider<any, any, any, any>; let ydoc: Y.Doc; let view: EditorView;
if (!element || !room) { return; }
ydoc = new Y.Doc(); provider = new LiveblocksProvider(room as any, ydoc);
const ytext = ydoc.getText("codemirror"); const undoManager = new Y.UndoManager(ytext);
const state = EditorState.create({ doc: ytext.toString(), extensions: [ basicSetup, javascript(), yCollab(ytext, provider.awareness, { undoManager }), ], });
view = new EditorView({ state, parent: element, });
return () => { ydoc?.destroy(); provider?.destroy(); view?.destroy(); }; }, [element, room]);
return <div ref={ref} className={styles.editor} />;}

Add collaboration to your product today