https://github.com/streamich/collaborative-monaco
Collaborative editing support for Monaco editor. Binds JSON CRDT "str" node to a Monaco editor instance.
https://github.com/streamich/collaborative-monaco
Last synced: 11 months ago
JSON representation
Collaborative editing support for Monaco editor. Binds JSON CRDT "str" node to a Monaco editor instance.
- Host: GitHub
- URL: https://github.com/streamich/collaborative-monaco
- Owner: streamich
- Created: 2023-12-02T17:43:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-08-08T14:39:33.000Z (11 months ago)
- Last Synced: 2025-08-08T16:29:07.844Z (11 months ago)
- Language: TypeScript
- Size: 23 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Collaborative editing for Monaco editor
Makes a plain Monaco editor instance collaborative by binding it to a JSON CRDT
document `str` node. This allows multiple users to edit the same document
json-joy JSON CRDT document concurrently through the Monaco editor.
## Usage
Installation:
```
npm install json-joy monaco-editor collaborative-monaco
```
Usage:
```ts
import {bind} from 'collaborative-monaco';
import * as monaco from 'monaco-editor';
import {Model} from 'json-joy/lib/json-crdt';
const model = Model.create(s.str('hello'));
const editor = monaco.editor.create(div, {
value: 'hello world',
});
const unbind = bind(model.s.toApi(), editor);
// When done, unbind the binding.
binding.unbind();
```
## React Usage
Installation:
```
npm install json-joy monaco-editor collaborative-monaco @monaco-editor/react react react-dom
```
Usage:
```tsx
import {Model, s} from 'json-joy/lib/json-crdt';
import {CollaborativeMonaco} from 'collaborative-monaco/lib/CollaborativeMonaco';
const model = Model.create(s.str('hello'));
const MyComponent = () => {
return
};
```
## Preview
- See [demo](https://streamich.github.io/collaborative-monaco).