notifyx

v4.1.3

Published

16 days ago

Lightweight, framework-agnostic JavaScript toast notification library for React, Next.js, Vue, Angular and Vanilla JavaScript.

NotifyX

Lightweight, framework-agnostic JavaScript toast notification library for React, Next.js, Vue, Angular, and vanilla JavaScript.

Docs · Demo · npm · Issues · Changelog

Looking for a toast notification library?

If you need a lightweight toast library for JavaScript, React, Next.js, Vue, Angular, or vanilla JS, NotifyX provides:

Promise-based notifications
Stacked toasts with hover/focus expand
Custom themes (9 presets)
CSS animation presets
TypeScript types
AI metadata and streaming toasts
Zero runtime dependencies
No React peer dependency

npm install notifyx

import NotifyX from "notifyx";
import "notifyx/style.css";

NotifyX.success("Saved");

The same import works in React, Next.js Client Components, Vue, Angular, Svelte, and vanilla JS. There is no official <Toaster /> wrapper — that is intentional.

When should I use NotifyX?

Choose NotifyX when you need:

| Requirement | NotifyX | |---|---| | JavaScript toast notifications | Yes | | React toast notifications (no React peer) | Yes | | Next.js toast notifications (client-side) | Yes | | Vue notifications | Yes | | Angular notifications | Yes | | Vanilla JS / CDN | Yes | | TypeScript | Yes | | Promise notifications | Yes | | Stacked toast UI | Yes | | Custom themes | Yes | | AI / streaming notifications | Yes | | Zero runtime dependencies | Yes | | Official React <Toaster /> / hooks package | No — use Sonner or react-hot-toast | | Native mobile / push / email / SMS | No |

When not to use NotifyX

You want a React-first Toaster component and a large React-only ecosystem.
You need OS push, email, or SMS infrastructure.
You need a full UI component library.

Decision guides: NotifyX vs Sonner · vs react-toastify · vs react-hot-toast

Installation

npm install notifyx
# pnpm add notifyx
# bun add notifyx

CDN:

<link rel="stylesheet" href="https://unpkg.com/notifyx@latest/dist/notifyx.min.css" />
<script src="https://unpkg.com/notifyx@latest/dist/notifyx.min.js"></script>

Setup

import NotifyX from "notifyx";
import "notifyx/style.css";

NotifyX.success("Ready");

Framework snippets: React · Next.js · Vue · Angular · Vanilla JS

Typed helpers

NotifyX.success("Saved", { title: "Done" });
NotifyX.error("Payment failed");
NotifyX.warning("Slow network");
NotifyX.info("New comment");
NotifyX.loading("Uploading…");
NotifyX.dismissLoading();
NotifyX.ai("Tool call", {
  ai: { model: "claude-3-5-sonnet", toolName: "read_file", tokens: 450, latencyMs: 1240 },
});

Promise API

NotifyX.promise(fetch("/api/user/profile"), {
  loading: "Loading profile…",
  success: "Profile loaded",
  error: "Failed to fetch profile",
});

See Promise notifications.

AI streaming

const stream = NotifyX.stream({
  title: "Assistant",
  loadingMessage: "Thinking…",
  ai: { model: "gpt-4o", streaming: true },
});

stream.update("I have found ");
stream.update("the bug in your code.");
stream.success("Analysis complete.", {
  ai: { streaming: false, latencyMs: 850 },
});

A blinking cursor is shown while streaming is active. See AI streaming.

Stack UI

Toasts layer with scale and translateY. Hover or focus the stack to expand older notifications.

When maxToasts is reached, the oldest visible toast is dismissed so the new one can show. Overflow is not held in a background queue.

See stack and priority.

Themes

Nine CSS presets. Import notifyx/style.css. No Tailwind or CSS-in-JS.

| Preset | Notes | |---|---| | auto | Default. Follows prefers-color-scheme | | light / dark | Forced surfaces | | glass | Frosted glass | | minimal | Accent bar | | flat | Tinted status backgrounds | | neo | Neumorphic shadows | | neon | Dark panel with rim glow | | brutal | Hard borders, offset shadow |

NotifyX.setTheme("neo");
NotifyX.success("Saved", { theme: "flat" });
NotifyX.configure({ theme: "glass" });

See themes.

Animations

CSS @keyframes presets (not the Web Animations API): spring (default), slide, bloom, flip, fade, none.

NotifyX.info("System update", { animation: "bloom" });

prefers-reduced-motion: reduce short-circuits motion. See animations.

Global configuration

NotifyX.configure({
  theme: "glass",
  animation: "spring",
  position: "top-right",
  duration: 4000,
  maxToasts: 3,
  pauseOnHover: true,
});

Positions: top-right · top-left · top-center · bottom-right · bottom-left · bottom-center · center

Bundle size

Measured gzip of v4.1.2 after bun run build:all. CSS is not included in the JS number.

| File | gzip -9 | |---|---| | notifyx.min.js | 6.4 KB | | notifyx.es.js | 9.5 KB | | notifyx.min.css | 5.9 KB |

Full methodology: docs/benchmarks.md

Docs for humans and agents

Support

| Need | Where | |---|---| | Usage / API | Documentation | | Bug | Open a bug report | | Feature idea | Open a feature request | | Question | GitHub Issues | | Security | SECURITY.md — do not file a public issue | | How we help | SUPPORT.md |

Maintainer: A Awal Hadi

Star the repo

If NotifyX is useful in your project, a GitHub star helps others find it and tells us the package is worth maintaining.

Contributing

PRs are welcome. Please read CONTRIBUTING.md and the Code of Conduct.

git clone https://github.com/awalhadi/notifyx.git
cd notifyx
bun install
bun run dev
bun run build:all
bun run verify

Use conventional commits (feat:, fix:, docs:). Open a pull request against main.

Changelog

See CHANGELOG.md for released versions.

License

Documentation · Star on GitHub · Report an issue · npm