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
Monaco editor bindings for Yjs. Contribute to yjs/y-monaco development by creating an account on GitHub.Setupโ
{% tabs %} {% tab title="JavaScript" %}
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:
// https://github.com/yjs/yjs-demos/blob/master/monaco/monaco.js
const editor = monaco.editor.create(
document.getElementById('monaco-editor'),
{
value: '',
language: 'javascript',
theme: 'vs-dark'
}
)
const monacoBinding = new MonacoBinding(
type,
editor.getModel(),
new Set([editor]),
provider.awareness
)
{% endtab %}
{% tab title="install" %}
npm i monaco-editor yjs y-monaco
{% endtab %} {% endtabs %}
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).
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
A collection of demos for Yjs. Contribute to yjs/yjs-demos development by creating an account on GitHub.