Toastflow
Playground
Examples

Live Examples

Trigger real Toastflow notifications from the docs.

Use these examples to feel the runtime behavior before copying code into your app. They mirror the examples from the previous documentation.

The examples run in the browser through the Vue REPL. They use the same Toastflow store, timers, queue logic, and action handling as a real app.

Create methods and update

Use payload objects, title + options calls, typed helpers, then patch the last toast by id.

Loading Vue REPL...

Loading workflow

One toast id transitions through loading, success, and error states.

Loading Vue REPL...

Theming and HTML

Use theme classes, inline CSS overrides, trusted HTML, and action buttons.

Loading Vue REPL...

Custom toast variants

Use type: custom with a theme class, inline accent color, or hidden icon.

Loading Vue REPL...

CSS override layers

Compare global variables, type presets, theme classes, and inline CSS.

Loading Vue REPL...

Headless rendering

Trigger different workflows and render each toast through the ToastContainer slot.

Loading Vue REPL...

State and events

Observe getState(), subscribe(), and subscribeEvents() in a Vue app.

Loading Vue REPL...

Random feed with Toast

Send runtime toasts, save copies, and render the saved list with the Toast component.

Loading Vue REPL...

Queue and backpressure

Push batches, inspect visible and queued counts, then pause or resume the queue.

Loading Vue REPL...

Core store only

Use createToastStore directly without the Vue plugin or default renderer.

Loading Vue REPL...
Copyright © 2026