Official package · Frameworks

An htmx extension for live HTML swaps

Your server renders an HTML fragment and publishes it; every open page swaps it in with hx-ext="hibira". No WebSocket server, Channels or Redis to run, from any backend.

@hibira-io/htmxnpm ↗GitHub ↗

• hibira-swap swaps the published HTML with hx-swap, hx-target and out-of-band swaps; hx-trigger="hibira:event" runs the element’s own request instead.
• htmx 2 and htmx 4, with Laravel, Django, Flask, FastAPI, Rails, Go, Node or any backend with a Pusher server library.
• Private channels authorize with the CSRF header already in hx-headers, and a page with Laravel Echo keeps its one connection.

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

1. Install

   <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.11/dist/htmx.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/pusher-js@8.6.0/dist/web/pusher.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@hibira-io/htmx@0.1/dist/hibira.min.js"></script>

2. Set it up

   <body hx-ext="hibira" hibira-connect="YOUR_APP_KEY"
         hibira-options='{"wsHost":"ws.hibira.io"}'
         hibira-auth-endpoint="/broadcasting/auth"
         hx-headers='{"X-CSRF-TOKEN": "..."}'>
   
     <!-- the HTML your server publishes is swapped in -->
     <ul hibira-channel="orders" hibira-swap="order-created" hx-swap="afterbegin">…</ul>
   
     <!-- or the event makes the element fetch fresh HTML from you -->
     <div hibira-channel="private-cart.42" hx-get="/cart" hx-trigger="load, hibira:cart-changed"></div>
   </body>

3. Use it

   import pusher
   
   hibira = pusher.Pusher(
       app_id="YOUR_APP_ID",
       key="YOUR_APP_KEY",
       secret="YOUR_APP_SECRET",
       host="ws.hibira.io",
       ssl=True,
   )
   
   # after saving the order: every open page gets the new row
   hibira.trigger("orders", "order-created", render_to_string("orders/_row.html", {"order": order}))

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.
• On the Free plan, list every origin your pages load from in the app’s allowed origins (http://localhost:3000 while developing, then your domain). "*" needs a paid plan.
• On the Free plan an event carries up to 4 KB. For bigger or per-user HTML, publish a small event and let hx-trigger fetch the HTML from your server.

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 →