Tips and Tricks to Improve your Hotwire (Turbo and Stimulus) Knowledge

Everything you need to know about making Rails apps feel snappy and modern with Hotwire. From basic Turbo Drive to real-time updates with Streams, plus all the Stimulus tricks!

“Make JavaScript your second-favorite language” — Finally, JavaScript explained while keeping your Ruby soul intact. Check JavaScript for Rails Developers.

  1. Turbo Drive, Frames, Streams, Morph? What to use?!
  2. Enhanced debugging for Stimulus
  3. Beyond translations in Stimulus: formatting dates, time and currency
  4. Touch Events (swipe) using Stimulus
  5. Translations in Stimulus Controllers
  6. Using the Keyboard with Stimulus
  7. Build a Notion-like editor with Rails, part 2
  8. Create an Animated Counter in Stimulus
  9. How to Send Requests from Stimulus Controllers
  10. Use cases for Turbo's Custom Events
  11. Advanced Stimulus: Custom Action Options
  12. Why Disconnect in Stimulus Controllers
  13. Stimulus Features You (Didn't) Know
  14. Inheritance with Stimulus Controller
  15. Store UI State in localStorage with Stimulus
  16. Hotwire and Stimulus Tools You Need to Know
  17. Basic Autocomplete Without JavaScript using Datalist
  18. Broadcast Turbo Streams without Redis
  19. How do Turbo Streams Work (behind the scenes)
  20. Changing CSS as You Scroll with Stimulus
  21. Smooth Transitions with Turbo Streams
  22. ActiveStorage Direct Upload with Stimulus
  23. Drag & Drop Images with Preview using Stimulus Outlets
  24. Conditionally Style Turbo Frame Content
  25. Create a Resizable Navigation with Stimulus
  26. Connected and Disconnected Target Callbacks with Stimulus
  27. Building Nested Forms in Rails with Stimulus
  28. Refactor Stimulus.js Controllers to Use Change Callbacks
  29. Launch a Turbo Modal with URL Params Using Stimulus
  30. Nested Forms With Turbo (without dependencies)
  31. Preview an Image Before Upload with Hotwire/Stimulus
  32. Inline Save and Add Another with Rails and Hotwire
  33. Add a “X is writing…” with Rails and Turbo
  34. Update a Progress Bar using Turbo Streams (using Custom Actions)
  35. Communicating between Stimulus Controllers using Outlets API
  36. Customize the Turbo Progress Bar
  37. Custom Confirm Dialog For Turbo and Rails
  38. How to Create a Stimulus Toggle Class Controller
  39. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  40. ViewComponent over Turbo Stream Broadcasts
  41. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
  42. How to Toggle Multiple CSS Classes with Stimulus
  43. How to Properly Structure Stimulus Controller
  44. How to implement and customize Rails Flash Messages (notifications)
  45. Conditionally Add CSS Classes in Your Stimulus Controllers
  46. How to add a skeleton UI to Rails with Turbo
  47. How to add Hotkeys to your Rails App with Stimulus
  48. How to create Modals with Rails and Hotwire (and Tailwind CSS)