https://github.com/loro-dev/loro-codemirror
codemirror binding for loro
https://github.com/loro-dev/loro-codemirror
codemirror crdt editor local-first loro
Last synced: 4 months ago
JSON representation
codemirror binding for loro
- Host: GitHub
- URL: https://github.com/loro-dev/loro-codemirror
- Owner: loro-dev
- License: mit
- Created: 2025-01-20T11:17:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-07T08:25:08.000Z (8 months ago)
- Last Synced: 2025-10-13T03:34:34.985Z (8 months ago)
- Topics: codemirror, crdt, editor, local-first, loro
- Language: TypeScript
- Homepage: https://loro.dev
- Size: 101 KB
- Stars: 35
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Codemirror Binding for Loro
- Sync document state with Loro
- Sync cursors with Loro's Awareness and
[Cursor](https://loro.dev/docs/tutorial/cursor)
- Undo/Redo in collaborative editing
## Usage
```ts
import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { LoroExtensions } from "loro-codemirror";
import { EphemeralStore, LoroDoc, UndoManager } from "loro-crdt";
const doc = new LoroDoc();
const ephemeral = new EphemeralStore();
const undoManager = new UndoManager(doc, {});
new EditorView({
state: EditorState.create({
extensions: [
// ... other extensions
LoroExtensions(
doc,
// optional LoroEphemeralPlugin
{
ephemeral,
user: { name: "Bob", colorClassName: "user1" },
},
// optional LoroUndoPlugin
undoManager,
),
],
}),
parent: document.querySelector("#editor")!,
});
```
You can find the example
[here](https://github.com/loro-dev/loro-codemirror/tree/main/example).