Official package · Frameworks

A collaborative rich text editor for Filament

A rich text field that several people type in at the same time, like Google Docs: changes merge on their own, with live cursors and the avatars of who is editing. Its state is HTML like RichEditor, and the record saves with your Save button as usual.

hibira-io/filament-collabPackagist ↗GitHub ↗

  • Built on Yjs and TipTap: no locks and no “someone else saved this record” errors.
  • Changes are stored in your database as people type, so someone who opens the page later, or comes back after losing their connection, picks up where everyone is.
  • Filament 3, 4 and 5, in English, Traditional and Simplified Chinese, Japanese, Korean, Thai and Vietnamese.
Three people editing the same post: each one has a named cursor, and their avatars show above the field.
Three people editing the same post: each one has a named cursor, and their avatars show above the field.

Sign in to see these snippets with your own cluster host. Sign in

  1. Install

    composer require hibira-io/filament-collab
php artisan hibira:install
php artisan migrate

  2. Set it up

    use Hibira\Filament\HibiraPlugin;
use Hibira\FilamentCollab\HibiraCollabPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            HibiraPlugin::make(),
            HibiraCollabPlugin::make(),
        ]);
}

  3. Use it

    use Hibira\FilamentCollab\Forms\Components\CollaborativeEditor;

CollaborativeEditor::make('body')
    ->placeholder('Write the announcement…')
    ->columnSpanFull(),

Before you start

  • The app secret is shown only once, when you create the app or rotate its secret. Keep it on your server, never in a browser or game build.
  • Turn on Allow client events in the app’s settings: cursors travel between browsers as client events; the text itself does not need them.
  • The field’s HTML comes from the browser: clean it before you show it to other people, for example with sanitizeHtml().

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →