Official package · Frameworks

Realtime components for Livewire

Three drop-in pieces for Livewire 3 and 4: avatars of who else is on the page, a job batch progress bar that moves as the queue works, and a light that shows whether the realtime connection is up.

Packagist versionLicense

hibira-io/livewirePackagist ↗GitHub ↗

Fastest way: one prompt with the Hibira plugin

Install the plugin in your AI coding agent and paste the prompt. The agent signs you in, creates a free app if you need one, writes the code and sends a test event. GitHub ↗

  1. Install the plugin

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

  2. Paste this prompt

    Add Hibira Livewire (hibira-io/livewire) to this project.
Follow https://hibira.io/guides/livewire, 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.

Prefer to do it by hand? These are the steps below:

  1. Install
  2. Use it

Other AI tools and what the plugin includes →

  • <x-hibira-whos-here /> shows the signed-in people on the same page or room, live, through a presence channel.
  • <livewire:hibira-batch-progress :batch="$id" /> follows a Bus::batch() without wire:poll: it updates after each finished job and dispatches hibira-batch-finished at the end.
  • Laravel 10 to 13, with texts in English, Traditional and Simplified Chinese, Japanese, Korean, Thai and Vietnamese.
A Livewire page with the avatar of another signed-in person, a green Live light, and a customer import at 35% with 7 of 20 done.
A Livewire page with the avatar of another signed-in person, a green Live light, and a customer import at 35% with 7 of 20 done.

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

  1. Install

    composer require hibira-io/livewire
php artisan hibira:install
npm install laravel-echo pusher-js

  2. Use it

    <x-hibira-connection-status label />
<x-hibira-whos-here />

{{-- $batchId from Bus::batch([...])->dispatch()->id --}}
<livewire:hibira-batch-progress :batch="$batchId" />

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.
  • The components use window.Echo, which hibira:install writes in resources/js/echo.js: import it in resources/js/app.js.
  • Batch progress is broadcast from the queue: keep php artisan queue:work running.

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 →