Lightweight toast notifications with beautiful animations, zero dependencies, and TypeScript support. Perfect for modern web applications and mobile-responsive designs.
Trigger live toasts using the actual library currently running on this page.
Test out the new v4 Stack UI, Themes, and AI Streaming right here.
import NotifyX from 'notifyx'
import 'notifyx/style.css'
// Show toast notification
NotifyX.success('System running smoothly.', {
duration: 4000,
dismissible: true,
position: 'top-right',
theme: 'glass',
animation: 'spring',
priority: 'normal',
title: 'Status'
})npm install notifyxNotifyX v4 is built from the ground up to solve the challenges of modern agentic interfaces, streaming LLM outputs, and buttery-smooth 60fps UIs.
First-class support for streaming LLM tokens into toasts without UI blocking. Includes metadata badging for model latency, tokens, and tool calls.
Bypasses the Main Thread entirely. 5 GPU-accelerated presets (`spring`, `slide`, `bloom`, `flip`, `fade`) guarantee 60fps rendering even under heavy CPU load.
Elegant 3D stacking prevents notification overlapping. Features auto-scaling, dynamic transforms, and intelligent swipe-to-dismiss gestures.
Zero-dependency CSS theming engine. Instantly switch between `glassmorphism`, `neumorphic`, `brutalism`, `minimal`, `neon`, and `flat` material styles.
Built-in Min-Heap data structure intelligently buffers toast spam. Use the `critical` priority flag to instantly bypass limits and shake the UI.
All of this power packed into an aggressively optimized, tree-shakeable core. Zero external dependencies, fully compatible with React, Vue, and Vanilla JS.
Get the new AI-native NotifyX v4 running in your JavaScript project in minutes.
npm install notifyximport React from 'react';
import NotifyX from 'notifyx';
import 'notifyx/style.css'; // Import the zero-dependency CSS
function App() {
const handleCheckout = async () => {
// Basic Toast
NotifyX.success('Payment completed successfully!', {
theme: 'glass',
animation: 'spring'
});
// Or use the Promise API
await NotifyX.promise(processPayment(), {
loading: 'Processing payment...',
success: 'Payment verified.',
error: 'Transaction declined.'
});
};
return (
<button onClick={handleCheckout} className="btn-primary">
Complete Purchase
</button>
);
}NotifyX is a professional-grade toast notification library engineered specifically for next-generation JavaScript applications. Whether you are building complex LLM interfaces with React, reactive dashboards in Vue.js, enterprise platforms in Angular, or simply using Vanilla JavaScript, NotifyX delivers a unified, zero-dependency architecture that outperforms the competition.
As a lightweight notification library, NotifyX prioritizes your application's Core Web Vitals. By leveraging CSS `contain: content` layout isolation and WAAPI animations, NotifyX prevents expensive layout thrashing and ensures your primary application thread remains unblocked—even when rendering dozens of high-frequency AI tokens per second.