🚀 NotifyX v4

NotifyX v4 is engineered from the ground up to solve the challenges of modern web applications. Whether you are building an LLM-powered agent workflow, a Next.js SaaS, or an interactive dashboard, NotifyX delivers a pristine user experience.

# npm
npm install notifyx

# pnpm
pnpm add notifyx

# bun
bun add notifyx

import NotifyX from "notifyx";
import "notifyx/style.css"; // Required for UI styling

NotifyX.success("Ready for the AI era! 🚀");

NotifyX v4 departs from legacy list-based rendering, introducing a Stack-Based Architecture. Notifications gracefully stack with dynamic transform: scale() and translateY() 3D layering, saving vertical screen real estate while feeling incredibly premium.

Under the hood, the Priority Queue Manager handles influxes of notifications perfectly. If an application throws 20 events at once, NotifyX will instantly display the allowed maximum (maxToasts), gracefully holding the rest in memory and seamlessly rendering them as active toasts are dismissed.

NotifyX provides first-class support for AI metadata, rendering Model Context Protocol (MCP) tool calls, token counts, and latency flawlessly.

NotifyX.ai("Processing context...", {
  ai: {
    model: "claude-3-5-sonnet",
    toolName: "read_file",
    latencyMs: 1240,
    tokens: 450,
  },
});

It renders elegantly with a custom ✦ icon, specialized color palettes, and a structured metadata bar showcasing agent workflow steps.

LLMs stream responses token-by-token. NotifyX's StreamingBridge ensures smooth, jank-free progressive text rendering.

const stream = NotifyX.stream("Thinking...", {
  ai: { model: "gpt-4o", 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 },
});

A blinking ▋ cursor is natively rendered while streaming is active!

Manage asynchronous workflows beautifully.

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

NotifyX v4 ships with 9 theme presets defined by the ThemePreset type. All styling is vanilla CSS (no Tailwind). Import notifyx/style.css to enable them.

Adapt to the environment or force a mode:

Fixed visual identities for branded UIs:

// Global — sets data-notifyx-theme on <html>
NotifyX.setTheme("neo");

// Per toast — overrides global for one notification
NotifyX.success("Saved", { theme: "flat" });

// Default at init
NotifyX.configure({ theme: "glass" });

Calling setTheme("auto") removes data-notifyx-theme from <html> and restores OS-adaptive behavior.

The neo theme uses shadow pairs that match the host page background. Set on <html>:

<html data-notifyx-mode="light">  <!-- or "dark" -->

• Without data-notifyx-mode, neo follows prefers-color-scheme: dark on dark pages
• data-notifyx-mode="light" keeps light neumorphic shadows even on a dark OS theme

Try the Page Light/Dark toggle in example/index.html with the Neo theme selected.

For custom integrations or overrides:

• Theme: data-notifyx-theme="{preset}" on <html> (global) or on an individual .notifyx element
• Page mode (neo): data-notifyx-mode="light" or "dark" on <html>
• Source: built from src/styles/themes.css, shipped as notifyx/style.css

Valid ThemePreset values: 'auto' | 'light' | 'dark' | 'glass' | 'minimal' | 'flat' | 'brutal' | 'neo' | 'neon'

Powered by the Web Animations API for buttery-smooth 60fps rendering, bypassing Main Thread blocking.

• spring (Default) — Bouncy, physical, lively
• slide — Smooth directional translation
• bloom — Elegant scale and fade
• flip — 3D spatial rotation
• fade — Simple opacity transition

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

Because NotifyX v4 is built on a modular architecture, we expose the underlying subsystems directly on the NotifyX object for advanced control:

• NotifyX.queue: Access the Min-Heap priority queue (ToastQueue) instance. Manage overflow, peak queued states, or manually flush items.
• NotifyX.animation: Access the AnimationEngine directly. Hook into the Web Animations API (WAAPI) engine to apply staggerEnter, pulse, or shake animations to your own UI elements.
• NotifyX.stream_bridge: Access the StreamBridge utility. Use its fromIterable and pipe helpers to map arbitrary LLM data streams directly into DOM nodes.

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