Monaco

Search…
Monaco
​Monaco is the editor that powers VS Code. The y-monaco extension makes it collaborative.
GitHub - yjs/y-monaco: Monaco editor bindings for Yjs
GitHub
Monaco Editor
Setup
JavaScript
install
1
import * as Y from 'yjs'
2
import { WebrtcProvider } from 'y-webrtc'
3
import { MonacoBinding } from 'y-monaco'
4
​
5
const ydoc = new Y.Doc()
6
const provider = new WebrtcProvider('monaco', ydoc)
7
const type = ydoc.getText('monaco')
8
​
9
// There are some steps missing to initialize the editor
10
// The editor requires a webpack build-step
11
// See the complete example:
12
//   https://github.com/yjs/yjs-demos/blob/master/monaco/monaco.js
13
const editor = monaco.editor.create(
14
  document.getElementById('monaco-editor'),
15
  {
16
    value: '',
17
    language: 'javascript',
18
    theme: 'vs-dark'
19
  }
20
)
21
const monacoBinding = new MonacoBinding(
22
  type,
23
  editor.getModel(),
24
  new Set([editor]),
25
  provider.awareness
26
)
27
​
Copied!
1
npm i monaco-editor yjs y-monaco
Copied!
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). 
Yjs Monaco Example
Live Demo of the y-monaco editor binding
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.
yjs-demos/monaco at main · yjs/yjs-demos
GitHub
​
​
TipTap
Quill
Last modified 1yr ago
Copy link
Edit on GitHub
Contents
Setup