# #63 Hotwire Modals (the right way)

- URL: https://superails.com/posts/ruby-on-rails-63-hotwire-modals-the-right-way
- Published: 2022-02-13
- Duration: 21:15
- Access: free
- Topics: modals
- Playlists: Just enough Hotwire for Rails developers

⛔DO NOT use a StimulusJS controller to render TurboStreams!⛔

Extended text guide to this video: https://www.bearer.com/blog/how-to-build-modals-with-hotwire-turbo-frames-stimulusjs
* Git repo: https://github.com/corsego/63-hotwire-modals/commits/main
* TLDR: https://blog.corsego.com/hotwire-turbo-frame-modals

P.S. Feel free to add CSS "p-5 bg-slate-300 absolute z-10 top-10 right-10 rounded-md w-96 break-words" to the modal, so that it shows nicely above page content.

0:00 Intro
0:49 App Demo
2:12 Create New App
3:20 Scaffold Posts
4:44 Turbo Frame Modal
7:40 Add validations...
8:50 No matching turbo frame
9:35 Turbo Stream - to add new post
11:25 StimulusJS - dismiss modal
17:30 Modal to EDIT a post
20:20 Outro

## Chapters

- 0:00 Intro
- 0:49 App Demo
- 2:12 Create New App
- 3:20 Scaffold Posts
- 4:44 Turbo Frame Modal
- 7:40 Add validations...
- 8:50 No matching turbo frame
- 9:35 Turbo Stream - to add new post
- 11:25 StimulusJS - dismiss modal
- 17:30 Modal to EDIT a post
- 20:20 Outro