The right way to render flash messages without page refresh, while mixing Turbo Streams and Stimulus JS. Automatically dismiss flash in 5 seconds.

Creating a Single-Page-Application with Hotwire is quite easy!

Text guide: https://blog.corsego.com/turbo-hotwire-flash-messages
Source code: https://github.com/corsego/65-hotwire-flash/commits/main

0:00 FINAL APP DEMO
0:59 Create app
2:00 Scaffold Posts, Validations
3:28 SimpleCSS
4:15 Flash with page redirect
5:54 Turbo Streams - Create Posts
14:00 Flash without page redirect
19:55 CSS for flash
23:27 StimulusJS auto-remove Flash messages in 5 seconds
25:50 FINAL APP DEMO 2
26:16 Bonus: Render multiple Flash messages
26:57 VERY FINAL APP DEMO