# Collaborative editing with Yjs

> A Yjs provider: shared documents and live cursors travel over a private or presence channel, so Tiptap, BlockNote, ProseMirror, CodeMirror, Monaco and Quill work without a y-websocket server of your own.

Source: https://hibira.io/guides/y-hibira

A Yjs provider: shared documents and live cursors travel over a private or presence channel, so Tiptap, BlockNote, ProseMirror, CodeMirror, Monaco and Quill work without a y-websocket server of your own.

Package: y-hibira

- Peers sync with each other through client events; edits made offline merge when the connection comes back.
- Awareness for names, cursors and selections; on a presence channel a member who drops is removed at once.
- Works with pusher-js or a Laravel Echo channel, with a send rate limit and large updates split into chunks.

## 1. Install

```shell
npm install y-hibira yjs pusher-js
```

## 2. Use it

```js
import * as Y from 'yjs';
import Pusher from 'pusher-js';
import { HibiraProvider } from 'y-hibira';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/broadcasting/auth' },
});

const doc = new Y.Doc();
const provider = new HibiraProvider(pusher, 'presence-doc-42', doc);
provider.awareness.setLocalStateField('user', { name: 'Alice', color: '#f97316' });
// Tiptap: Collaboration.configure({ document: doc }) and CollaborationCaret.configure({ provider })
```

## Before you start

- Turn on Allow client events in the app’s settings: peers send document updates to each other as client events.
- Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.
- The server relays updates but does not store them. Save the document yourself (Y.encodeStateAsUpdate) and load it before connecting.

- [npm](https://www.npmjs.com/package/y-hibira)
- [GitHub](https://github.com/hibira-io/y-hibira)