sevensidedmarble

sevensidedmarble

Live Toast - new toast/flash component for Phoenix LiveView

Announcing Live Toast: a replacement toast/flash component for Phoenix LiveView, heavily inspired by the look of Sonner (the amazing toast component for React).

I’ve been cooking this up for a while. It’s still pre-1.0, but the general API should be solid.

My biggest gripe with the default flash system in Phoenix is that you may only have one toast for a given severity level. No more! Now you can use Live Toast to get around this, but it will also continue to render your flash messages in the same style so you can incrementally move towards the toasts instead.

As I said, its still early days so let me know if you find any problems.

Demo: https://toast.src.rip
Hex Docs: Live Toast — Live Toast v0.8.0
GitHub:

https://github.com/srcrip/live_toast

Most Liked

sevensidedmarble

sevensidedmarble

I’m going to write some more in the documentation about this (which I know is lacking right now), but the way it works and the philosophy is basically this:

The default flash system has some quirks. The two big ones are:

  1. You can only ever have one flash of a given ‘kind’. You can’t have multiple info level events. You can only ever have one on screen at a time. This is the big problem. It makes the flash system basically incompatible with the UI people are used to where events can trigger multiple messages that push the last one up.

  2. You can’t really trigger them without having a reference to the socket. This isn’t usually a big deal but sometimes is slightly annoying in some async code.

This is why LiveToast creates a new system designed to replace the default flashes. It is not possible to solve the big issue number 1 without making something new.

However, I wanted it to feel like a drop in experience where you wouldn’t have to go and change all your put_flashs to put_toasts. So the library aims to make them look identical. But the idea would be you would go and change all those at some point because the toasts are strictly better.

Navigations

The early implementation of the library presented an issue with navigations however: if you used put_toast on the socket during a navigation, you wouldn’t get anything showing up after the navigation occurred. This was because the library stores state on the assigns of that socket (the one being navigated), and:

  1. Those assigns go away after the nav
  2. All events stop happening once the nav starts

These two things make it basically impossible to show a toast the way the library is designed across navigations. The only way we could do it would be to use some kind of extra sticky LV (which would suck to force people to have to do) or to store more state on the frontend, which would just add a huge complexity.

The simpler option was to force the library to just use flashes whenever we were in the middle of a navigation. Because they look the same, it should be a fairly seamless experience.

Like PJ said, originally flashes did not have any kind of auto-dismiss option, which was initially done on purpose because I kind of wanted to show that they were different, but that option has been added now (it’s called flash_duration).

sevensidedmarble

sevensidedmarble

Little belated but a couple weeks back I released a large new version, 0.7.0 to hex, which fixes some long standing issues with making the flash-fallback function properly across page navigations. have fun!

sodapopcan

sodapopcan

This is great! It looked promising when you first mentioned it and I’m into the further work you’ve done.

I’m in the processes of converting a project over to it. A couple of problems off the bat which are only related to docs: you aren’t properly indenting the @doc examples so they aren’t rendering as code in Hexdocs. The code link (</>) is also broken in a bunch (possibly all) places. Not sure why that one is.

Lastly: I would love a :bottom_center option (and of course probably include :top_center) as that’s what I’m currently using. Happy to send a PR.

Oh, also while it’s fairly obvious, the docs mention using the put_toast helper without any instructions on how to import it.

EDIT: I’m just going to create github issues.

sodapopcan

sodapopcan

Oh I figured that out, just nice to include in the docs as it’s not 100% clear and causes a bit of mental dissonance :slight_smile: Or even like just put LiveToast.put_toast so it’s super obvious it’s not in a submodule or something. I just appreciate idiot-proof docs :grin:

PS: Client project has been converted to LiveToast and it’s working like a charm :rocket:

dstockdale

dstockdale

Nicely done :pray:. I’ve done a few Toast versions in Phoenix myself but your version is way nicer

Where Next?

Popular in Announcing Top

ananthakumaran
An ExUnit formatter to visualize test execution and find bottlenecks in your test suite. I created a small library called ex_unit_spa...
New
Gigitsu
Hi everyone! I’d like to share a small library I’ve recently extracted from a project I’m working on: ginject. ginject provides a minim...
New
roriholm
Hi! I just wanted to share my public release of something I’ve been working on. The Paradigm library provides some core utilities for a d...
New
fuelen
Hi all! Confispex is a tool which allows defining specs for runtime configuration, cast values according to specified types and inspect ...
New
Zurga
Subscribe to events emitted by EctoWatch, and cache the changed row. Use the sync/3 function to update an in-memory row or list of rows u...
New
bradley
I’ve been working with Claude Code extensively and absolutely love it. However, I’ve come across the challenge of managing configuration ...
New
LostKobrakai
I’ve recently created a small library phoenix_vite integrating the vite build tooling with phoenix. It provides an igniter.installer t...
New
zoedsoupe
update (since 2025-07-24) the project got forked and rebranded to anubis-mcp, since i not on CloudWalk anymore and can’t ensure they will...
New
jallum
Hey folks :waving_hand: I’ve been building a distributed key-value store in Elixir/OTP called Bedrock. It implements FoundationDB’s arch...
New
waseigo
I saw this LinkedIn post: *Can your programming language do this? This is a macro in Clojure called `dotrace`. When you surround a pie...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
peerreynders
Manning 2016 Halloween weekend sale via Deal of the Day Friday, October 28 - Half off all MEAPs - code WM102816LT Saturday, October 29 ...
326 29600 154
New
dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New

We're in Beta

About us Mission Statement