Server-rendered toast notifications for Phoenix LiveView.

Toast is a notification system for Phoenix LiveView that works as a drop-in replacement for your existing flash messages. It provides three ways to show notifications:

1. Toast messages - Call Toast.send_toast() from your LiveView to show rich, interactive notifications
2. Pipe operation - Use Toast.put_toast() to pipe toast messages in your socket chain
3. Flash messages - Your existing put_flash() calls continue to work, displayed in the same toast style

Installation

Add toast to your dependencies in mix.exs:

def deps do
  [
    {:toast, "~> 0.2.0"}
  ]
end

Setup

1. Import the JavaScript hook in your app.js:

   # Note: The import path may vary depending on your project structure # For assets in the root directory: import Toast from "../deps/toast/assets/js/toast.js";

   # For assets in nested folders (e.g., assets/js/app.js): import Toast from "../../deps/toast/assets/js/toast.js";

   let liveSocket = new LiveSocket("/live", Socket, { hooks: { Toast } });

2. Import the CSS in your app.css:

   / Note: The import path may vary depending on your project structure / / For assets in the root directory: / @import "../deps/toast/assets/css/toast.css";

   / For assets in nested folders (e.g., assets/css/app.css): / @import "../../deps/toast/assets/css/toast.css";

   / If you are using DaisyUI, exclude their toast component to avoid conflicts: / @plugin "../vendor/daisyui" { exclude: toast; }

3. Add the toast container to your root layout:

   <Toast.toast_group flash={@flash} />

Basic Usage

Send toasts from your LiveView:

def handle_event("save", _params, socket) do
  Toast.send_toast(:success, "Changes saved!")
  {:noreply, socket}
end

Or use the pipe-friendly version:

def handle_event("save", _params, socket) do
  {:noreply, 
   socket
   |> assign(:saved, true)
   |> Toast.put_toast(:success, "Changes saved!")}
end

Toast Types

• :info - Blue informational messages
• :success - Green success messages
• :error - Red error messages
• :warning - Yellow warning messages
• :loading - Loading state with spinner
• :default - Default neutral style

Options

Configure individual toasts with:

Toast.send_toast(:success, "Message",
  title: "Success!",
  description: "Additional details",
  duration: 10_000,
  action: %{
    label: "Undo",
    event: "undo_action"
  }
)

HTML Content

Toast supports rendering raw HTML in messages, titles, and descriptions using Phoenix.HTML.raw/1:

# Render HTML in message
Toast.send_toast(:info, Phoenix.HTML.raw("<strong>Important:</strong> Action required"))

# Render HTML in all fields
Toast.send_toast(:success, Phoenix.HTML.raw("Payment <em>processed</em>"),
  title: Phoenix.HTML.raw("<strong>Success!</strong>"),
  description: Phoenix.HTML.raw("Transaction ID: <code>TXN-12345</code>")
)

⚠️ Security Warning: Only use Phoenix.HTML.raw/1 with trusted content. Never render user-generated HTML without proper sanitization as it can lead to XSS vulnerabilities.

See the documentation for send_toast/3 for all available options.