AlertifyJS - Browser Dialogs & Notifications

1.14.0 · maintenance · verified Sun Apr 19

AlertifyJS is a lightweight JavaScript framework designed for creating customizable and visually appealing browser dialogs (alerts, confirms, prompts) and unobtrusive notification messages. Currently stable at version 1.14.0, the package was last updated approximately two years ago, suggesting an inactive release cadence. It aims to replace native browser dialogs, which are often blocking and visually inconsistent, with a more modern and user-friendly experience. Key differentiators include its small footprint, out-of-the-box theme support (AlertifyJS, Semantic UI, Bootstrap), responsiveness across devices, and built-in internationalization (i18n) and Right-to-Left (RTL) layout support. Unlike full-fledged UI libraries, AlertifyJS focuses solely on dialogs and notifications, offering a simple API for common use cases.

Common errors

```
Uncaught ReferenceError: alertify is not defined
```
cause The `alertify` global object or module export was not loaded or imported correctly before being used.

fix Ensure AlertifyJS is imported at the top of your script (`import alertify from 'alertifyjs';`) or that the script tag for the library is included and loaded before any `alertify` calls in a global context.
```
Dialogs appear as unstyled, basic browser prompts/alerts.
```
cause The necessary CSS stylesheets (core and theme) for AlertifyJS have not been correctly imported or linked in the HTML.

fix Add the CSS imports: `import 'alertifyjs/build/css/alertify.min.css';` and `import 'alertifyjs/build/css/themes/default.min.css';` (or another theme) to your JavaScript entry point, or link them directly in your HTML `<head>` section.
```
TypeError: Cannot read properties of undefined (reading 'alert')
```
cause Often occurs in module environments if `alertify` is imported but the default export is not correctly captured or the module resolves to `undefined`.

fix Verify that `import alertify from 'alertifyjs';` is used for ESM or `const alertify = require('alertifyjs');` for CJS, ensuring the exported `alertify` object is correctly assigned and accessible.

Warnings

breaking The license for AlertifyJS changed from MIT to GPLv3 starting with version 1.8.0. This is a significant change in licensing terms that affects how the software can be used, modified, and distributed, especially in commercial projects.
Fix: Review the GPLv3 license terms carefully to ensure compliance with your project's licensing requirements. If incompatible, consider using versions prior to 1.8.0 or exploring alternative libraries.
breaking AlertifyJS is an 'extreme makeover' of the original `alertify.js` library by @fabien-d. This implies significant API changes and behavioral differences, meaning code written for `alertify.js` will likely not work directly with AlertifyJS without modification.
Fix: Consult the AlertifyJS documentation for the correct API usage. Do not assume compatibility with the predecessor `alertify.js`.
gotcha If a callback is provided to a notification (e.g., `alertify.success('message', callback)`), clicking the notification message will not automatically close it. This differs from previous behavior in the original `alertify.js` and might lead to unexpected user experience if not accounted for.
Fix: Manually dismiss notifications within your callback if desired, or ensure your UI design accounts for this persistent behavior. Implement logic to prevent duplicate callback calls if the user clicks multiple times.
gotcha AlertifyJS supports the `prefers-reduced-motion` CSS media feature. If a user has enabled reduced motion in their operating system settings, all animation and transition effects within AlertifyJS will be automatically disabled to respect user preference.
Fix: Be aware that animations may not always play. Test your application with `prefers-reduced-motion` enabled to ensure the user experience remains coherent and accessible without animations. This is a feature, not a bug, but can surprise developers expecting animations.
gotcha When using bundlers or module loaders, explicitly importing the necessary CSS files (core and theme) is crucial. Neglecting these imports will result in unstyled, basic browser dialogs and notifications, which do not align with the library's 'pretty dialogs' promise.
Fix: Always include `import 'alertifyjs/build/css/alertify.min.css';` for the core styles and `import 'alertifyjs/build/css/themes/YOUR_THEME.min.css';` for your chosen theme in your application's entry point or relevant component.

Install

npm install alertifyjs npm
yarn add alertifyjs yarn
pnpm add alertifyjs pnpm

Imports

alertify
wrong:
```
const alertify = require('alertifyjs');
```
correct:
```
import alertify from 'alertifyjs';
```
For ESM environments, use the default import. For CommonJS, `require('alertifyjs')` returns the global `alertify` object. This is the primary way to interact with the library.
CSS (Core)
wrong:
```
import 'alertifyjs/alertify.min.css';
```
correct:
```
import 'alertifyjs/build/css/alertify.min.css';
```
The core CSS is essential for basic styling. Always import from the `build/css` directory. Paths like `alertify.css` without `.min` or inside `build` may not be correct or minified.
CSS (Theme)
wrong:
```
import 'alertifyjs/themes/default.min.css';
```
correct:
```
import 'alertifyjs/build/css/themes/default.min.css';
```
Choose a theme like 'default', 'semantic.min.css', or 'bootstrap.min.css' to apply a specific visual style. This import must be done *after* the core `alertify.min.css`.

Quickstart

This quickstart demonstrates how to import AlertifyJS and its necessary CSS, then use its core functionalities: `alert`, `confirm`, `prompt`, and various `notifier` messages (success, error, warning, message). It includes callback examples for interactive dialogs.

import alertify from 'alertifyjs';
import 'alertifyjs/build/css/alertify.min.css';
import 'alertifyjs/build/css/themes/semantic.min.css'; // Or 'default.min.css', 'bootstrap.min.css'

// Basic Alert
alertify.alert('Hello World!', function(){ alertify.message('You clicked OK'); });

// Confirm Dialog
alertify.confirm('Confirm Action', 'Are you sure you want to proceed?',
  function(){
    alertify.success('You clicked OK');
  },
  function(){
    alertify.error('You clicked Cancel');
  }
);

// Prompt Dialog
alertify.prompt('Prompt Example', 'Please enter your name:', 'Anonymous',
  function(evt, value){
    alertify.success(`Hello ${value}!`);
  },
  function(){
    alertify.error('You clicked Cancel');
  }
);

// Notification Message
alertify.success('Success message here!');
alertify.error('Error message here!');
alertify.warning('Warning message here!');
alertify.message('Normal message here.');

console.log('AlertifyJS initialized and examples run.');

view raw JSON →