alertifyjs

library1.14.0jsnpmunverified

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.

web-framework communication

npm install alertifyjs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ALERTIFYJS

alertifyjs

web-frameworkjavascriptv1.14.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

alertify

✓ import alertify from 'alertifyjs';

✗ const alertify = require('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)

✓ import 'alertifyjs/build/css/alertify.min.css';

✗ import 'alertifyjs/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)

✓ import 'alertifyjs/build/css/themes/default.min.css';

✗ import 'alertifyjs/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`.

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.');

Debug

Known issues

breakingThe 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.

affects: >=1.8.0

breakingAlertifyJS 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`.

affects: >=1.0.0

gotchaIf 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.

affects: All

gotchaAlertifyJS 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.

affects: >=1.13.0

gotchaWhen 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.

affects: All

Errors

Common errors & fixes

Uncaught ReferenceError: alertify is not defined

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.

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')

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.

Upgrade

Version history

1.14.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

59 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/MohammadYounes/AlertifyJS ↗

packagehttps://www.npmjs.com/package/alertifyjs ↗

homepagehttps://alertifyjs.com ↗