Alertify.js — Modern Browser Dialogs & Notifications
A lightweight, zero-dependency JavaScript library that replaces the browser's native `alert()`, `confirm()`, and `prompt()` dialogs with styled, accessible, theme-aware alternatives — and adds a toast notification system that works consistently across all browsers and operating systems.
Provides a drop-in replacement for the browser's native synchronous dialog API with styled, promise-compatible equivalents — giving developers full control over notification UX without importing a heavyweight UI framework or accepting inconsistent OS-level visual rendering.
Overview
The browser's native alert(), confirm(), and prompt() dialogs are functionally adequate but visually inconsistent across operating systems and browsers. They render with OS-level theming that cannot be overridden with CSS, they block JavaScript execution entirely (synchronous blocking), and they communicate nothing about the application's brand or visual language. Alertify.js replaces all of them with styled, promise-based alternatives that behave consistently in every environment.
The Problem It Solves
Native browser dialogs have several fundamental problems that make them unsuitable for production web applications:
Visual inconsistency — Chrome, Firefox, Safari, and mobile browsers all render alert() differently, using OS-level font and spacing that is completely disconnected from the application's design.
No styling control — you cannot apply CSS to native dialogs. They inherit from the operating system, not from your stylesheet.
Synchronous blocking — alert() and confirm() block the JavaScript event loop, making them incompatible with modern async workflows.
No rich content support — native dialogs only support plain text. Custom HTML, icons, action buttons beyond OK/Cancel, and branding are impossible.
Alertify.js resolves all of these issues while maintaining an API surface that mirrors native browser dialogs for easy adoption.
Key Features
- Styled alert, confirm, and prompt — drop-in replacements for all three native browser dialog types
- Promise-compatible API —
await alertify.confirm('Are you sure?')works naturally in async functions - Toast notifications — success, error, warning, and info message types with configurable positioning
- Multiple themes — includes a default theme and a Bootstrap-compatible theme; fully customisable via CSS
- Custom HTML content — dialogs support rich HTML markup for enhanced messaging
- No framework dependencies — works in React, Vue, Angular, jQuery, Laravel Blade, or plain HTML
- npm package — available as a standard npm module for build pipeline integration
- CDN delivery — also available via unpkg/jsDelivr for no-build-step usage
Usage Examples
Alert dialog:
alertify.alert('Notice', 'Your session will expire in 5 minutes.', function() {
// callback after OK
});
Confirm dialog (Promise-based):
const confirmed = await alertify.confirm('Delete this record?');
if (confirmed) {
await deleteRecord(id);
alertify.success('Record deleted successfully.');
}
Toast notification:
alertify.success('Project saved!');
alertify.error('Connection failed. Please try again.');
Technology Stack
Vanilla JavaScript (ES6+), CSS custom properties for theming, CommonJS and ES Module distribution targets. Zero runtime dependencies — the entire library is self-contained.
Practical Use Cases
- Web applications requiring consistent, branded dialog UX across different browsers
- Admin dashboards where destructive action confirmations need polished, on-brand UI
- Legacy applications replacing
alert()andconfirm()calls without a full refactor - WordPress themes and plugins requiring styled notifications without a heavy dependency
- Any project where native browser dialogs create visual inconsistency or UX quality concerns
Source & License
Source code and documentation on GitHub. MIT Licensed.