# collaborative-editor

> JSON CRDT str node bindings to any generic plain text editor.

Latest version **2.9.0** (published 2025-05-15) · 0 weekly downloads

## Install

```sh
npm install collaborative-editor
pnpm add collaborative-editor
yarn add collaborative-editor
bun add collaborative-editor
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.9.0 |
| Published | 2025-05-15 |
| First published | 2023-12-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | streamich |
| Maintainers | streamich |
| Keywords | collaborative, multiplayer, binding, collaborative-editor, editor, input, textarea, contenteditable, json-crdt, json, crdt |

## Links

- npm: https://www.npmjs.com/package/collaborative-editor
- Repository: https://github.com/streamich/collaborative-editor
- Issues: https://github.com/streamich/collaborative-editor/issues
- npm.io page: https://npm.io/package/collaborative-editor

## Dependencies (1)

- [json-joy](https://npm.io/package/json-joy.md) ^17.42.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.9.0 (latest) — 2025-05-15
- 2.8.0 — 2024-10-02
- 2.7.0 — 2024-09-23
- 2.6.0 — 2024-07-24
- 2.5.0 — 2024-07-24
- 2.4.0 — 2024-07-23
- 2.3.0 — 2024-07-20
- 2.2.0 — 2024-07-17
- 2.1.0 — 2023-12-03
- 2.0.0 — 2023-12-02
- 1.0.1 — 2023-12-02
- 1.0.0 — 2023-12-02

## README

# Collaborative plain text editor binding

This package provides binding for a generic text editor to a [JSON CRDT `str` node](https://jsonjoy.com/specs/json-crdt/model-document/node-types#The-str-RGA-String-Node-Type).

![collaborative-editor](https://github.com/user-attachments/assets/7d1c2158-5890-4e73-8aa8-bc929e9135f8)


## Usage

Installation:

```
npm install json-joy collaborative-editor
```

Simple integration for any plain text editor, for the most basic integration
you only need to implement the `.get()` and `.set()` methods:

```ts
import {StrBinding, EditorFacade} from 'collaborative-editor';
import {Model} from 'json-joy/lib/json-crdt';

const str = model.api.str(['path', 'to', 'string']);
const unbind = StrBinding.bind(str, {
  get: () => input.value,
  set: (value: string) => input.value = value,
}, true);
```

For a better integration, implement as many `EditorFacade` methods as possible:

```ts
import {StrBinding, EditorFacade} from 'collaborative-editor';

const editor: EditorFacade = {
  // ...
};

const str = model.api.str(['path', 'to', 'string']);
const binding = new StrBinding(str, editor);

binding.syncFromModel();
binding.bind(polling);

// When done, unbind the binding.
binding.unbind();
```


## Preview

- See [demo](https://streamich.github.io/collaborative-editor).

---
_Source: https://npm.io/package/collaborative-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._