官方套件 · 即時功能元件

用 Yjs 做協作編輯

一個 Yjs provider：共用文件和即時游標透過 private 或 presence 頻道傳送，Tiptap、BlockNote、ProseMirror、CodeMirror、Monaco 和 Quill 都能直接用，不必自己架 y-websocket 伺服器。

y-hibiranpm ↗GitHub ↗

最快的方式：裝好 Hibira 外掛，貼上一段提示詞

在你的 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 的頻道，內建傳送頻率限制，較大的更新會自動分段。

兩個 Tiptap 編輯器透過 y-hibira 共用一份文件：兩邊都顯示「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 })

開始之前

在 App 設定中開啟「Allow client events」：各端用 client events 互傳文件更新。
私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。
伺服器只轉送更新，不會儲存。請自行儲存文件（Y.encodeStateAsUpdate），並在連線前載入。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。免費建立帳號 →