Official package · Frameworks

Svelte stores for realtime WebSockets

Stores for events, presence, client events and connection state on Svelte 5 and Svelte 4, made for SvelteKit. Use them with $store in any component.

@hibira-io/sveltenpm ↗GitHub ↗

useEvent, usePresence, useTrigger and useConnectionState share one connection; channel names can be stores or, in Svelte 5, getters over $state.
Safe with SvelteKit server rendering: nothing connects on the server, and values arrive after hydration.
channelAuth() turns a +server.js into the auth endpoint for private and presence channels, and useStream() shows LLM output sent with streamToChannel().

Install
```
npm install @hibira-io/svelte pusher-js
```

Set it up

<!-- src/routes/+layout.svelte -->
<script>
  import { env } from '$env/dynamic/public';
  import { createHibira, setHibira } from '@hibira-io/svelte';

  let { children } = $props();
  setHibira(createHibira({
    appKey: env.PUBLIC_HIBIRA_KEY,
    options: {
      wsHost: 'ws.hibira.io',
      channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
    },
  }));
</script>

{@render children()}

Use it

<script>
  import { useEvent, usePresence } from '@hibira-io/svelte';

  let orders = $state([]);
  useEvent('orders', 'order.created', (order) => (orders = [order, ...orders]));
  const dashboard = usePresence('presence-dashboard');
</script>

<p>{$dashboard.count} online, {orders.length} new orders</p>

Before you start

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.
Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.

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 →

Svelte stores for realtime WebSockets

Install

Set it up

Use it

Before you start