Official package · Realtime building blocks

A notification inbox for your app

A bell with an unread badge and a feed with read, unread and archive, live in every open tab and app. Your server sends one request; Hibira stores the notifications, delivers them in real time and pushes them to users who are offline.

@hibira-io/inboxnpm ↗GitHub ↗pub.dev ↗

• React, Vue and React Native components, and Flutter widgets in the hibira_inbox package, in seven languages, in light and dark.
• The browser or app reads and marks its own feed with a short-lived user token your server signs, so you write no proxy endpoints.
• Users with no open connection get a push notification through Hibira Push. A key makes retries safe: the same notification is never stored twice.

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

1. Install

   npm install @hibira-io/inbox pusher-js

2. Send from your server

   import { createInbox } from '@hibira-io/inbox';
   
   const inbox = createInbox({
     appId: process.env.HIBIRA_APP_ID,
     key: process.env.HIBIRA_KEY,
     secret: process.env.HIBIRA_SECRET,
   });
   
   await inbox.send({
     users: ['ann', 'bob'],
     title: 'Order #1042 shipped',
     url: '/orders/1042',
     key: 'order-1042-shipped',
   });
   
   // GET /api/inbox-token, behind your login
   app.get('/api/inbox-token', requireLogin, (req, res) => {
     res.json({ token: inbox.userToken(req.user.id) });
   });

3. Use it

   import { NotificationBell, useInboxClient } from '@hibira-io/inbox/react';
   import '@hibira-io/inbox/styles.css';
   
   export function Header({ user }) {
     const client = useInboxClient({ appId: APP_ID, tokenUrl: '/api/inbox-token', pusher, userKey: user.id });
     return <header>{client && <NotificationBell client={client} />}</header>;
   }

4. Flutter

   // flutter pub add hibira_inbox
   import 'package:hibira_inbox/hibira_inbox.dart';
   
   final inbox = HibiraInbox(
     appId: hibiraAppId,
     token: () => api.inboxToken(), // from GET /api/inbox-token
     client: hibira, // a signed-in HibiraClient, for live updates
   );
   
   AppBar(actions: [NotificationBell(inbox: inbox)]);

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.
• For live updates, sign the user in on the client (pusher.signin() with a user authentication endpoint). Without it the inbox refreshes every minute.
• Notifications are kept 7 days on Free, 30 days on Hobby and Starter and 90 days on Pro and up, and each user keeps the newest 1,000. Each recipient counts as one message.

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 →