Open source · ~5KB · zero dependencies

The tiny toast that makes your site feel alive.

Toastify streams macOS-style notifications — sales, signups, reviews, anything worth noticing — onto any website.Vanilla JavaScript, TypeScript native, no framework required.

Star on GitHub ↗

LIVE — the toasts in the corner are @zzev/toastify, running on this page.

landing.ts — running on this page

import { Theme, Core } from "@zzev/toastify";

const theme = new Theme(null); // light · dark · auto
const toast = new Core();

await toast.init({
  styles: theme.styles,
  messages: [
    {
      img: "/toasts/pay.svg",
      title: "Payment received",
      time: "now",
      text: "Ana upgraded to Pro — $49.00",
    },
    {
      img: "/toasts/user.svg",
      title: "New signup",
      time: "12s ago",
      text: "marco@studio.dev just joined",
    },
    {
      img: "/toasts/star.svg",
      title: "New review",
      time: "1m ago",
      text: "“Exactly what our checkout needed.”",
    },
  ],
  delays: {
    startAfterMs: 1200,
    displayIntervalMs: 2200,
    fadeOutMs: 4500,
  },
});

toast.run();

↑ the exact code behind the toasts you just sawno mockups

~5KB

minified

0

dependencies

100%

TypeScript

3

themes · light / dark / auto

GPL-3.0

open source

01The point

97% of visitors leave without doing anything.

An empty room doesn't convert. Toastify streams what's actually happening on your product — orders, signups, reviews — as native-feeling notifications, so the room never looks empty. Every example below fires the real library. Try them.

01

Recent activity

Orders and signups, surfaced the moment they happen. FOMO — but factual.

02

Social proof

A review lands harder when it arrives like a text from a friend — not buried on a testimonials page.

03

Gentle nudges

Trial ending, cart waiting, discount tonight. Say it without shoving a modal in anyone's face.

02Ship it

Install, init, run. That's the whole API.

1
Install
One package, no dependency tree.
2
Describe the moment
A toast is four fields: img, title,time, text. Feed it real events from your backend, your webhook, your imagination.
3
Run
toast.run() handles the stacking, the timing and the fade. stop(), update() anddestroy() are there when you need them.

notifications.ts

import { Theme, Core } from "@zzev/toastify";

// null = auto: follows the visitor's system theme
const theme = new Theme(null);
const toast = new Core();

await toast.init({
  styles: theme.styles,
  messages: [
    {
      img: "/icons/order.svg",
      title: "New order",
      time: "now",
      text: "Basil & Co. bought 2 × Sourdough Kit",
    },
  ],
  delays: {
    startAfterMs: 1000,      // wait before the first toast
    displayIntervalMs: 2000, // gap between toasts
    fadeOutMs: 5000,         // 0 = never fade out
  },
});

toast.run();

03Playground

Bake your own toast.

Compose a notification and fire it with the real library — exactly what your visitors would see on your site.

04Under the hood

Small library. Obsessive details.

001

Featherweight

~5KB minified, zero dependencies. Nothing to audit, nothing to break on a random Tuesday.

002

macOS-grade motion

Toasts slide in on a 500mscubic-bezier(0.39, 0.575, 0.565, 1), stack downward and fade on their own clock.

003

Three themes

Light, dark, or auto via prefers-color-scheme. Frosted backdrop blur included.

004

Mobile-aware

Below 768px visitors see one toast at a time instead of a stack. Small screens, small manners.

005

TypeScript native

Ships its own types. ToastifyMessageProps autocompletes before you finish typing it.

006

Accessible by default

role="alert" with aria-live, so screen readers hear what sighted users see.

05Questions

Asked, answered.

Does it work with React, Vue, Svelte, WordPress…?

Yes — it's framework-agnostic vanilla JavaScript. If your stack renders HTML in a browser, it works: import, init, run. This very page is Astro with zero UI frameworks.

Do I need a build step?

It ships as an ES module on npm, so Vite, Next, Astro or any modern bundler picks it up directly — and a plain<script type="module"> works too.

What exactly do my visitors see?

A macOS-style notification in the top-right corner: icon, title, timestamp, message. New toasts push earlier ones down, then the stack fades out on the schedule you set. Scroll up and hit replay if you missed it.

Will it slow my site down?

At ~5KB with zero dependencies, the library is lighter than your hero image — by a factor of about forty. Styles are injected once and DOM operations are minimal.

Can I fake the notifications?

Technically you can type anything into messages. Don't. Real events convert better, and nobody trusts “María from your city bought this 3 minutes ago” anymore. Show receipts, not fiction.

Is it really free?

GPL-3.0 open source — free to use, and if you modify and distribute it, share the source. Read thelicense or thefull API reference on GitHub.