Monaco is the editor that powers VS Code. The y-monaco extension makes it collaborative.


import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc'
import { MonacoBinding } from 'y-monaco'

const ydoc = new Y.Doc()
const provider = new WebrtcProvider('monaco', ydoc)
const type = ydoc.getText('monaco')

// There are some steps missing to initialize the editor
// The editor requires a webpack build-step
// See the complete example:
const editor = monaco.editor.create(
    value: '',
    language: 'javascript',
    theme: 'vs-dark'
const monacoBinding = new MonacoBinding(
  new Set([editor]),

Live Demo

Unfortunately, we can't show a live-code example on this website because the editor requires a build-step that online-IDEs don't support. Maybe you can give it a try? Anyway, we still have a live demo available on a different website (simply open it in two different tabs).

Demo Code

The yjs-demos repository contains several demos. Simply download the repository you are interested in (e.g. the monaco folder) and run npm install && npm start to run the demo.

Last updated