Toastify – A Simple and Lightweight Toast Notification Library

Toastify is a super simple, fast, and easy-to-use toast notification library for modern web apps. It displays clean, customizable notifications with zero dependencies and supports ESM, CJS, and UMD builds for maximum compatibility.

Demo

You can try this library live:

👉 Interactive Demo on StackBlitz

🌐 UMD Build Test on GitHub Pages

Key Features

• No Dependencies – No external libraries required
• Modern & Flexible – ESM, CJS, and UMD builds for all environments
• Fully Customizable – Position, duration, icons, themes, stacking, and more
• Theming – Light/dark, custom classes, and icon support
• Tiny & Fast – Minimal footprint, instant rendering

Installation

# npm
npm install @andreasnicolaou/toastify

# yarn
yarn add @andreasnicolaou/toastify

# pnpm
pnpm add @andreasnicolaou/toastify

CDN / Direct Usage

<!-- unpkg CDN (latest version, unminified) -->
<script src="https://unpkg.com/@andreasnicolaou/toastify/dist/index.umd.js"></script>

<!-- unpkg CDN (latest version, minified) -->
<script src="https://unpkg.com/@andreasnicolaou/toastify/dist/index.umd.min.js"></script>

<!-- jsDelivr CDN (un-minified) -->
<script src="https://cdn.jsdelivr.net/npm/@andreasnicolaou/toastify/dist/index.umd.js"></script>

<!-- jsDelivr/unpkg CDN (minified) -->
<script src="https://cdn.jsdelivr.net/npm/@andreasnicolaou/toastify/dist/index.umd.min.js"></script>

<!-- jsDelivr Styles (minified) -->
<link rel="stylesheet" href="https://unpkg.com/@andreasnicolaou/toastify/dist/styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@andreasnicolaou/toastify/dist/styles.css" />

UMD (for <script> tags, global toastify variable):

<link rel="stylesheet" href="https://unpkg.com/@andreasnicolaou/toastify/dist/styles.css" />
<script src="https://unpkg.com/@andreasnicolaou/toastify/dist/index.umd.min.js"></script>
<script>
  const manager = new toastify.ToastifyManager('top-right', { closeButton: true });
  manager.success('Hello!', 'Toastify loaded from CDN!');
</script>

ESM (modern bundlers):

import { ToastifyManager } from '@andreasnicolaou/toastify';
import '@andreasnicolaou/toastify/dist/styles.css';

const manager = new ToastifyManager('top-right', { closeButton: true });
manager.success('Success!', 'Toastify ESM import works!');

CJS (Node/CommonJS):

const { ToastifyManager } = require('@andreasnicolaou/toastify');
require('@andreasnicolaou/toastify/dist/styles.css');

const manager = new ToastifyManager('top-right', { closeButton: true });
manager.info('Info', 'Toastify CJS import works!');

Quick Usage Example

import { ToastifyManager } from '@andreasnicolaou/toastify';
import '@andreasnicolaou/toastify/dist/styles.css';

const toast = new ToastifyManager('top-right', {
  closeButton: true,
  withProgressBar: true,
  newestOnTop: true,
});

toast.success('Success!', 'Your operation was completed successfully.');
toast.error('Error!', 'Something went wrong, please try again.');
toast.info('Heads Up!', 'You have new updates available.', { closeButton: false });

Styling

• Default: Import or link dist/styles.css for ready-to-use styles.
• Custom: Pass a customClasses option to ToastifyManager to add your own classes and override styles as needed.

API

Toast Methods

| Function | Description | Options (per toast, overrides manager) | | ----------------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | default(title, message, options?) | Displays a default toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection | | light(title, message, options?) | Displays a light toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection | | error(title, message, options?) | Displays an error toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection | | success(title, message, options?) | Displays a success toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection | | warning(title, message, options?) | Displays a warning toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection | | info(title, message, options?) | Displays an info toast. | duration, isHtml, withProgressBar, progressBarDuration, closeButton, direction, showIcons, animationType, tapToDismiss, progressBarDirection |

All options can be set globally on the manager or per-toast (per call).

Options

| Option | Description | Default Value | | ---------------------- | ----------------------------------------------------------------------------------------------------- | ------------- | | duration | Time in milliseconds for the toast to remain visible. Setting this to 0 will stick the toast forever. | 3000 | | isHtml | Whether the message should support HTML. | false | | withProgressBar | Show a progress bar for the toast. | false | | progressBarDuration | Duration of the progress bar (milliseconds). | 100 | | closeButton | Show a close button on the toast. | false | | showIcons | Show icons for each toast type (error, success, etc.). | true | | direction | Direction of the text (ltr or rtl). | ltr | | customClasses | Custom CSS classes to add to the toast container. | "" | | maxToasts | The maximum number of toasts that can be displayed at once. | 5 | | animationType | Animation style: fade, slide, zoom, bounce, flip, none. | fade | | tapToDismiss | Dismiss toast on click/tap. | false | | newestOnTop | Stack newest toasts on top (true) or bottom (false). | false | | progressBarDirection | Progress Bar direction either increase or decrease. | decrease |

Theming & Customization

• Use the customClasses option to add your own classes for custom themes.
• Use the built-in light type for a light toast theme: toast.light('Title', 'Message').

Updating Active Toasts

All toast methods (success, error, info, warning, default, light) return a ToastifyHandle that lets you update the toast in-place while it is still visible.

const handle = toast.info('Upload', 'Uploading...');

// Later — update message and type in-place
handle.update({ message: 'Processing on server...' });

// Final step — switch type, update message, start auto-dismiss with a progress bar
handle.update({
  title: 'Upload',
  message: 'Upload complete!',
  type: 'success',
  withProgressBar: true,
  progressBarDuration: 100,
});

Works seamlessly with real async code:

const handle = toast.info('GitHub', 'Fetching data...', { duration: 0 });
try {
  const resp = await fetch('https://api.github.com/repos/andreasnicolaou/toastify');
  handle.update({ message: 'Parsing response...' });
  const data = await resp.json();
  handle.update({
    title: 'Loaded',
    message: `⭐ ${data.stargazers_count} stars`,
    type: 'success',
    withProgressBar: true,
  });
} catch {
  handle.update({ title: 'Error', message: 'Request failed', type: 'error', duration: 5000 });
}

Queued toasts work too. If the toast is waiting behind maxToasts, calls to handle.update() are buffered and replayed the moment the toast appears — no polling, no race conditions.

ToastifyUpdateOptions

| Property | Type | Description | | --------------------- | -------------- | -------------------------------------------- | | title | string | Replaces the toast title text | | message | string | Replaces the toast message text | | type | ToastifyType | Swaps the visual type (colour + icon) | | duration | number | Restarts auto-dismiss timer (0 = indefinite) | | withProgressBar | boolean | Adds or removes the progress bar | | progressBarDuration | number | Interval (ms) per progress-bar tick | | closeButton | boolean | Shows or hides the close button | | isHtml | boolean | Interprets message as raw HTML | | tapToDismiss | boolean | Enables or disables tap-to-dismiss |

Any field from ToastifyOptions is accepted — only the keys you provide are changed, all others remain as-is.

Tip: Use duration: 0 on the initial call to prevent auto-dismiss while the operation is in progress, then supply a duration (or withProgressBar: true) on the final update() call to auto-dismiss once done.

Contributing

Contributions are welcome! If you encounter issues or have ideas to enhance the library, feel free to submit an issue or pull request.