Framework-Agnostic Toast Notifications with TypeScript – NotifyX

NotifyX is a framework-agnostic JavaScript toast notification library that displays beautiful success messages, error alerts, and system warnings on your web apps.

The library weighs less than 3KB gzipped and works perfectly with React, Next.js, Vue, Angular, Laravel, or vanilla JavaScript.

Features

• Built-in Dark Mode: Automatically detects system preferences.
• TypeScript Support: Built with TypeScript from the ground up.
• WCAG Compliant: Includes proper ARIA attributes and keyboard navigation.
• Four Toast Types: Success, error, warning, and info variants.
• Flexible Positioning: Four corner positions (top-right, top-left, bottom-right, bottom-left).
• Customizable Duration: Set display time from 1 second to persistent.
• 5 Extra smooth Animations: `spring`, `slide`, `bloom`, `flip`, `fade`.
• 6 Themes: `glassmorphism`, `neumorphic`, `brutalism`, `minimal`, `neon`, and `flat` material styles.
• AI Streaming API: Smooth, jank-free progressive text rendering.

How To Use It:

1. Install NotifyX with the package manager you prefer and import it into your project as follows:

# Yarn
$ yarn add notifyx
# NPM
$ npm install notifyx
# PNPM
$ pnpm install notifyx
# BUN
$ bun add notifyx

// Import the NotifyX class
import NotifyX from 'notifyx';
// Import default styles
import 'notifyx/style.css';

2. You can also load the NotifyX’s files in your document if you use it in a Vanilla JavaScript project.

<!-- Local -->
<link rel="stylesheet" href="/dist/notifyx.min.css" />
<script src="/dist/notifyx.min.js"></script>
<!-- OR from a 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>

3. NotifyX provides four methods for different message types:

// Success
NotifyX.success('Success Message');
// Error
NotifyX.error('Error Message');
// Warning
NotifyX.warning('Warning Message');
// Info
NotifyX.info('Info Message');

4. Place notifications in any screen corner:

// Top positions (default is top-right)
NotifyX.info('Top Right Position', { position: 'top-right' });
NotifyX.info('Top Left Position', { position: 'top-left' });
// Bottom positions
NotifyX.info('Bottom Right Position', { position: 'bottom-right' });
NotifyX.info('Bottom Left Position', { position: 'bottom-left' });

5. Control how long notifications remain visible:

// Auto-dismiss after 2 seconds
NotifyX.success('Success Message', { duration: 1000 });
// Auto-dismiss after 3 seconds
NotifyX.info('Info Message');
// Persistent notification
NotifyX.error('Error Message', { duration: 0 });

6. Create streaming output like an AI assistant.

const stream = NotifyX.stream("Thinking...", {
  ai: { model: "gpt-5", streaming: true },
  position: "bottom-right",
});
// Stream chunks as they arrive
stream.update("I have found ");
stream.update("the specific bug ");
stream.update("in your code.");
// Finalize
stream.success("Analysis complete!", {
  ai: { streaming: false, latencyMs: 850 },
});

7. Asynchronous state management:

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

8. You can also use the show() method for complete control:

NotifyX.show({
  message: 'User profile updated successfully!',
  type: 'default',  // Notification type
  animation: 'spring', // `spring`, `slide`, `bloom`, `flip`, `fade`
  theme: 'auto', // `glassmorphism`, `neumorphic`, `brutalism`, `minimal`, `neon`, and `flat`
  duration: 3000,
  showProgress: true,
  showIcon: true,
  pauseOnHover: true,
  dismissible: true,
  maxToasts: 5,
  position: 'top-right',
  onClose: () => {
    // This callback fires when notification closes
    console.log('Notification was closed');
  }
});

Alternatives:

• 10 Best Toast Notification JavaScript Libraries (2026 Update)

Changelog:

v4.0.0 (04/23/2026)

• AI/LLM Streaming Bridge: Native streaming API (NotifyX.stream()) for progressive token rendering.
• Stack-Based UI Architecture: Elegant, non-overlapping toast stacking with dynamic scaling and transforms.
• Priority Queue Manager: Intelligent queuing system to manage toast limits and display priorities.
• Web Animations API Engine: 5 premium, GPU-accelerated animation presets (spring, slide, bloom, flip, fade).
• Advanced Theme Engine: 6 zero-dependency CSS themes including glass, brutal, and minimal.
• Promise API: Robust asynchronous state management with NotifyX.promise().
• AI Metadata Support: Custom UI for MCP tool calls, latency, and token metrics.
• Swipe-to-Dismiss: Native gestural interactions for touch devices.
• Zero-Dependency CSS: Fully replaced Tailwind CSS with a scalable vanilla CSS custom property architecture.
• API Modernization: Transitioned legacy class-based implementations to streamlined static methods (NotifyX.success()).
• Layout Robustness: Re-architected DOM rendering, resolving clipping bugs by shifting from contain: strict to contain: content.
• UMD Build Fixes: Fixed global scope exports in UMD builds. Main API remains under 7KB gzipped.
• Removed all external CSS framework dependencies (Tailwind).
• Removed legacy UI clipping rules.