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!

Want to become more comfortable writing your own JavaScript and understand the JavaScript written by others? Check JavaScript for Rails Developers.

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