Open source · ~5KB · zero dependencies

The tiny toast that makes your site feel alive.

Toastify streams macOS-style notifications onto any website: a sale, a signup, a five-star review, anything worth noticing.Vanilla JavaScript with its own TypeScript types, 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 sawnot a mockup

~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 turns what's actually happening in your product into native-feeling notifications, so the room never looks empty. Every example below fires the real library. Try them.

01

Recent activity

Orders and signups appear the moment they happen. FOMO, except it's all true.

02

Social proof

A review lands harder when it shows up like a text from a friend instead of sitting buried on a testimonials page.

03

Gentle nudges

Trial about to end? Cart still sitting there? Say it without shoving a modal in anyone's face.

02Ship it

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

1
Install
One package, and it brings nothing else with it.
2
Describe the moment
A toast is four fields: img, title,time, text. Feed it real events from your backend or a webhook, or make some up while you're testing.
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.

Put a notification together and fire it with the real library, exactly as your visitors would see it.

04Under the hood

Small library. Obsessive details.

001

Featherweight

~5KB minified, zero dependencies. There's no dependency tree to audit and nothing upstream that breaks 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 get one toast at a time instead of a stack, because a phone screen has no room for a pile-up.

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 and answered.

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

Yes. It's vanilla JavaScript, so if your stack renders HTML in a browser, it works: import, init, run. This very page is Astro with no UI framework at all.

Do I need a build step?

No. It ships as an ES module on npm, so Vite, Next, Astro or any modern bundler picks it up directly. A plain<script type="module"> tag 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?

No. At ~5KB the library weighs about a fortieth of a typical hero image. It injects its styles once and barely touches the DOM after that.

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?

Yes. It's GPL-3.0 open source: free to use, and if you modify and distribute it, you share your source. Read thelicense or thefull API reference on GitHub.