{"id":10490,"library":"alertifyjs","title":"AlertifyJS - Browser Dialogs & Notifications","description":"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.","status":"maintenance","version":"1.14.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/MohammadYounes/AlertifyJS","tags":["javascript","alertifyjs","alert","confirm","prompt","dialog","alertify","javascript framework","pretty dialogs"],"install":[{"cmd":"npm install alertifyjs","lang":"bash","label":"npm"},{"cmd":"yarn add alertifyjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add alertifyjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const alertify = require('alertifyjs');","symbol":"alertify","correct":"import alertify from 'alertifyjs';"},{"note":"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.","wrong":"import 'alertifyjs/alertify.min.css';","symbol":"CSS (Core)","correct":"import 'alertifyjs/build/css/alertify.min.css';"},{"note":"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`.","wrong":"import 'alertifyjs/themes/default.min.css';","symbol":"CSS (Theme)","correct":"import 'alertifyjs/build/css/themes/default.min.css';"}],"quickstart":{"code":"import alertify from 'alertifyjs';\nimport 'alertifyjs/build/css/alertify.min.css';\nimport 'alertifyjs/build/css/themes/semantic.min.css'; // Or 'default.min.css', 'bootstrap.min.css'\n\n// Basic Alert\nalertify.alert('Hello World!', function(){ alertify.message('You clicked OK'); });\n\n// Confirm Dialog\nalertify.confirm('Confirm Action', 'Are you sure you want to proceed?',\n  function(){\n    alertify.success('You clicked OK');\n  },\n  function(){\n    alertify.error('You clicked Cancel');\n  }\n);\n\n// Prompt Dialog\nalertify.prompt('Prompt Example', 'Please enter your name:', 'Anonymous',\n  function(evt, value){\n    alertify.success(`Hello ${value}!`);\n  },\n  function(){\n    alertify.error('You clicked Cancel');\n  }\n);\n\n// Notification Message\nalertify.success('Success message here!');\nalertify.error('Error message here!');\nalertify.warning('Warning message here!');\nalertify.message('Normal message here.');\n\nconsole.log('AlertifyJS initialized and examples run.');","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.8.0"},{"fix":"Consult the AlertifyJS documentation for the correct API usage. Do not assume compatibility with the predecessor `alertify.js`.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.13.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `alertify` global object or module export was not loaded or imported correctly before being used.","error":"Uncaught ReferenceError: alertify is not defined"},{"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.","cause":"The necessary CSS stylesheets (core and theme) for AlertifyJS have not been correctly imported or linked in the HTML.","error":"Dialogs appear as unstyled, basic browser prompts/alerts."},{"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.","cause":"Often occurs in module environments if `alertify` is imported but the default export is not correctly captured or the module resolves to `undefined`.","error":"TypeError: Cannot read properties of undefined (reading 'alert')"}],"ecosystem":"npm"}