Client library

Realtime HTML with WebSockets

Add one script tag to any web page: a connected client plus a live online counter, feed and toasts, with no build step.

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

Using an AI coding agent? Copy the agent prompt ↓

  1. Add the script tag

    <!-- Before </body>, on every page that needs live updates -->
<script src="https://hibira.io/embed/v1.js" data-key="YOUR_APP_KEY" data-host="ws.hibira.io" async></script>

  2. Drop in ready-made widgets

    <!-- People on this page right now (turn on "Send subscriber counts" in the app settings) -->
<span data-hibira-online="lobby">0</span> online

<!-- The newest "update" events on the news channel, newest first -->
<ul data-hibira-feed="news" data-event="update" data-limit="10"></ul>

<!-- A toast for each "alert" event: { "title": "...", "body": "...", "url": "..." } -->
<div data-hibira-toast="alerts" data-event="alert" data-position="bottom-right"></div>

  3. Use the client in your own code

    // Runs as soon as the script has loaded, even if this code runs first.
(window.Hibira = window.Hibira || []).push((client) => {
  client.subscribe('orders').bind('order-shipped', (data) => {
    console.log('Order shipped', data);
  });
});

Agent prompt

Paste this into Claude Code, Cursor, GitHub Copilot or another AI coding agent, and it will wire Hibira into your HTML project with the settings above.

Replace YOUR_APP_KEY and the other placeholders with the values from your dashboard, or let the agent leave them as environment variables for you to fill in.

Or connect the Hibira MCP server, and your agent can create the app and fill in its credentials itself. Connect your AI coding agent →

Use the app key and secret from your dashboard. Channels, events and authorization endpoints work exactly as they do with Pusher. Library reference ↗