公式パッケージ · リアルタイムの部品

Yjs で共同編集

Yjs プロバイダー：共有文書とリアルタイムカーソルを private または presence チャンネルで送るので、Tiptap、BlockNote、ProseMirror、CodeMirror、Monaco、Quill が自前の y-websocket サーバーなしで動きます。

y-hibiranpm ↗GitHub ↗

最速の方法：Hibira プラグインとプロンプト 1 つ

AI コーディングエージェントにプラグインを入れて、プロンプトを貼り付けるだけ。エージェントがサインインし、必要なら無料アプリを作成し、コードを書いてテストイベントを送ります。 GitHub ↗

プラグインをインストール

claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

このプロンプトを貼り付け

Add Hibira Yjs (y-hibira) to this project.
Follow https://hibira.io/guides/y-hibira, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

自分で設定したい場合 以下の手順です：

インストール
使う

他の AI ツールとプラグインの中身 →

各クライアントは client events で互いに同期し、オフライン中の編集は再接続時にマージされます。
名前・カーソル・選択範囲を awareness で共有。presence チャンネルなら切断したメンバーはすぐに消えます。
pusher-js でも Laravel Echo のチャンネルでも使え、送信レートの制限と大きな更新の分割を備えています。

2 つの Tiptap エディターが y-hibira で 1 つの文書を共有：どちらにも「Synced」と Alice・Kenji のアイコンが表示され、Alice のカーソルが Kenji のエディターに見えています。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール
```
npm install y-hibira yjs pusher-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 })

始める前に

アプリの設定で「Allow client events」をオンにしてください。文書の更新は client events でやり取りします。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。
サーバーは更新を中継するだけで保存しません。文書は自分で保存し（Y.encodeStateAsUpdate）、接続前に読み込んでください。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →