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