Introduction
What NotificationStream is, what it is for, and how a notification travels from your backend to your users.
NotificationStream gives your product the in-app notifications users already know from social and productivity apps: a bell with an unread badge, a drawer that opens from it, and a full-page inbox. You send notifications from your backend or the dashboard; the SDKs render them in your web or mobile app.
Why use it
Drop-in UI
The JavaScript, React and React Native SDKs ship a bell, drawer and feed that look native, follow light and dark mode, and can be themed from the dashboard or in code.
Real targeting
Send to everyone, to specific users, to users with certain tags, or to a rule-based segment such as "Pro plan users in Germany who joined this year". Tags and segments need the Growth plan or higher.
Localized and personalized
One notification carries content in several languages, and templates such as
{{user.name | there}} are filled in per user. Both need the Growth plan or higher.Light on quota and devices
Your plan counts the requests your app makes, never the notifications you send or how many users they reach. The SDKs only poll or stay connected while your app is visible, share one poller or connection across browser tabs, and get an empty 304 instead of the full feed when nothing changed.
How it works
Your backend NotificationStream API Your app (SDK)
──────────── ────────────────────── ──────────────
POST /v1/notifications ───▶ stores the notification with its
(secret key sk_…) audience, schedule and expiry
GET /api/notifications/token ──────────────────────────────▶ user token (JWT, sub = user id)
(signs with your signing key)
◀─── GET /v1/client/feed
verifies publishable key, (X-Publishable-Key: pk_…,
user token and origin, Authorization: Bearer <token>)
matches broadcasts against on load, on return and
the user (tags, segments), on a realtime signal or poll
localizes and personalizes,
returns items + counts (or 304) ───▶ bell, drawer, inbox
◀─── POST /v1/client/actions
records read / archive / click (read, archive, click,
and returns the new counts mark all as read/seen)- Your backend sends a notification with a secret key (
sk_…), either through the Node SDK or the REST API. It picks an audience, localizedcontents, and optionally a schedule, expiry, category, action URL, image and customdata. - Your backend signs a user token. A short-lived JWT, signed with one of your
project's signing keys, that names the signed-in user (see
Identity verification). The SDK sends it with
every request, next to your project's publishable key (
pk_…). - The SDK fetches the feed when it starts and when the user returns to your app, plus
when the feed changes if you turn on realtime
(Growth plan and up), or on a timer if you turn on polling. Each fetch returns the user's notifications, already
localized and personalized, plus
unreadCount,unseenCountand the project's remote configuration (theme, default locale). When nothing changed, the browser gets an empty304 Not Modified, which still counts as a request. - Users interact. Opening the drawer clears the badge (
seen_all), clicking an item marks it read and records the click, and users can archive or mark everything read. You can see read and click counts per notification in the dashboard or viaGET /v1/notifications/{id}.
What's in the box
| Piece | What it does |
|---|---|
| Dashboard | Registration, billing, projects, API keys, composing and scheduling notifications, segments, project users, theme. |
@notificationstream/js | Framework-agnostic client and headless UI core for your own UI. |
@notificationstream/react | Provider, hooks and bell/drawer/feed components for React. |
@notificationstream/react-native | Provider, hooks and native bell/drawer/feed components. |
@notificationstream/node | Server SDK: send notifications, manage project users and segments, sign user tokens. |
| REST API | Everything the SDKs do, over HTTP, described by an OpenAPI 3.1 spec. |
Next steps
Quickstart
From registration to your first notification in about ten minutes.
Core concepts
The vocabulary used across these docs: projects, keys, project users, audiences and read states.
SDKs
JavaScript, React, React Native and Node.
REST API
Everything the SDKs do, over HTTP, described by an OpenAPI 3.1 document.