sweetalert2

SweetAlert2 replaces the browser’s native window.alert/confirm/prompt dialogs with a single, promise-based Swal.fire() API that covers alerts, confirmations, input forms, toasts, image popups, and multi-step wizards. It ships with zero runtime dependencies, full TypeScript typings, and WAI-ARIA accessible markup with built-in focus management and keyboard handling, making it a drop-in upgrade for teams that want themeable popups without hand-rolling a modal component.

Beyond the core popup, the library includes ready-made theme stylesheets for Bootstrap 4/5, Bulma, Material UI, Minimal, and Borderless design systems, a rich set of built-in input types (text, email, password, select, radio, checkbox, file, range) with inline validation, and lifecycle hooks (willOpen, didOpen, preConfirm, didDestroy) for wiring async logic like API calls into the popup lifecycle. Official companion packages extend it into React (sweetalert2-react-content), Angular (ngx-sweetalert2), and Laravel (sweetalert2-laravel) codebases.

What You Get

• A single UMD/ESM bundle (sweetalert2.all.js / .esm.all.js) with zero runtime dependencies and full TypeScript typings shipped in sweetalert2.d.ts.
• A promise-based Swal.fire() API that covers alerts, confirms, prompts, toasts, image popups, and multi-step progress-step wizards from one function.
• Ready-made theme stylesheets for Bootstrap 4/5, Bulma, Material UI, Minimal, and Borderless design systems, plus a built-in light/dark theme param.
• Official framework wrapper packages for React, Angular, and Laravel maintained under the same GitHub org.
• WAI-ARIA accessible markup with automatic focus trapping/return-focus and keyboard (Escape/Enter) handling built in.

Common Use Cases

• Replacing native window.confirm()/alert()/prompt() calls with a themeable, accessible popup.
• Validating and collecting a single input value (email, password, select, file) inline in a popup via inputValidator/preConfirm.
• Showing non-blocking toast notifications for save, copy-to-clipboard, or background-task feedback.
• Building multi-step onboarding or checkout flows using progress steps and chained Swal.fire() calls.

Under The Hood

Architecture The core is a single SweetAlert class (src/SweetAlert.js) that freezes user-supplied params via argsToParams, merges them against defaultParams (src/utils/params.js) and any active mixin params, then hands off to a render pipeline (src/utils/dom/renderers/render.js and its per-section renderers — renderPopup, renderTitle, renderContent, renderIcon, renderInput, renderActions, renderProgressSteps) that mutates a cached DOM snapshot (populateDomCache) rather than diffing a virtual DOM. Instance methods (close, update, getInput, enable/disableButtons) live in src/instanceMethods/*.js and are assigned onto SweetAlert.prototype, while static methods (fire, mixin, bindClickHandler) in src/staticMethods/*.js are assigned onto the constructor and proxy back to a single module-level currentInstance tracked in globalState.js — a deliberate, pragmatic singleton design rather than a modular event-driven one, with the tradeoff that only one popup can be truly “current” at a time.

Tech Stack Plain, dependency-free JavaScript authored with JSDoc type annotations instead of TypeScript source, validated against a hand-maintained sweetalert2.d.ts. The build pipeline uses Rollup with @rollup/plugin-babel and @rollup/plugin-terser to emit UMD and ESM bundles, Sass compiles the SCSS source into distributed CSS, and Bun/zx scripts (tools/build.mjs) drive the build. Linting runs oxlint + oxfmt + stylelint rather than ESLint/Prettier, and type-checking runs raw tsc --noEmit against the JSDoc-annotated source using a deliberately pinned older TypeScript version to verify compatibility with the oldest supported compiler. Framework wrappers (React/Angular/Laravel) live in sibling repos under the same GitHub org rather than in this codebase.

Code Quality Testing is end-to-end via Cypress (a single large cypress/e2e/tests.cy.js suite) plus dedicated TypeScript compile-checks against both source and distributed typings, and a CommonJS require smoke test. CI runs the full Cypress suite across Chrome, Firefox, and WebKit on every push, plus a Webpack 4/5 build-compatibility check on the main branch. No isolated unit tests exist for the smaller utility modules — coverage is entirely behavior-driven through the browser. Error handling favors explicit console warnings over throwing, naming is descriptive and consistent, and JSDoc annotations give the whole source tree real type safety without a TypeScript build step.

API Design The entire public surface is a single function, Swal.fire(options|title,text,icon), that fans out to alerts, confirms, prompts, toasts, image popups, and input forms depending on which of the many available params are set — an unusually flat and memorable surface for the breadth of behavior it covers, and a reason it has remained a common replacement for native browser dialogs for many years. A mixin() static method lets consumers pre-bind shared options (theme, custom classes) into a reusable bound fire() call without extra boilerplate. It isn’t algorithmically novel — it’s a DOM/CSS-driven popup renderer — but the one-function ergonomics, first-class TypeScript typings, and dedicated theme stylesheets for multiple CSS frameworks are genuine developer-experience differentiators over hand-rolling a modal.