https://github.com/streamich/collaborative-ace
Collaborative editing support for Ace editor
https://github.com/streamich/collaborative-ace
Last synced: 11 months ago
JSON representation
Collaborative editing support for Ace editor
- Host: GitHub
- URL: https://github.com/streamich/collaborative-ace
- Owner: streamich
- Created: 2023-12-03T13:00:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-08-07T18:33:38.000Z (11 months ago)
- Last Synced: 2025-08-07T20:37:47.046Z (11 months ago)
- Language: TypeScript
- Size: 16.5 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Ace editor collaborative editing binding
Makes a plain Ace 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 Ace editor.
## Usage
Installation:
```
npm install json-joy ace-builds collaborative-ace
```
Usage:
```ts
import {bind} from 'collaborative-ace';
import {Model} from 'json-joy/es2020/json-crdt';
// ...
const unbind = bind(str, editor);
// When done, unbind the binding.
binding.unbind();
```
## React Usage
Installation:
```
npm install json-joy ace-builds collaborative-ace react-ace react react-dom
```
Usage:
You use the `` component exactly the same as the ``
component from [`react-ace`](https://www.npmjs.com/package/react-ace), with the
only difference that you pass a `str` node from a JSON CRDT document instead of
a plain string `value` prop.
```tsx
import {Model, s} from 'json-joy/lib/json-crdt';
import {CollaborativeAce} from 'collaborative-ace/lib/CollaborativeAce';
const model = Model.create(s.str('hello'));
const MyComponent = () => {
return
};
```
## Preview
- See [demo](https://streamich.github.io/collaborative-ace).