Tips and tricks to improve your Hotwire 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!
-
Record video in Rails with Stimulus
-
Replace Turbo confirm with native dialog
-
Building optimistic UI in Rails powered by Turbo
-
Use native dialog with Turbo (and no extra JavaScript)
-
Add snow to your app with Stimulus
-
Update favicon with badge using custom turbo streams in Rails
-
Update page title counter with custom turbo streams in Rails
-
Extending the Kanban board (using Rails and Hotwire)
-
Create a Kanban board with Rails and Hotwire
-
Visual loading states for Turbo Frames with CSS only
-
Stimulus basics: what is a Stimulus controller?
-
Shift+Click Selection for Bulk Actions with Stimulus
-
User-Specific Content in Turbo Stream Partials
-
Create a macOS-inspired stack UI with Stimulus and Tailwind CSS
-
Add Konami Codes with Stimulus
-
Smarter Use of Stimulus' Action Parameters
-
Auto-pause YouTube Videos with Stimulus
-
Auto-pause Video Player with Stimulus
-
Create a Markdown-Powered Textarea with Stimulus
-
Natural Language Parser for Recurring Events using Stimulus
-
Turbo Drive, Frames, Streams, Morph? What to use?!
-
Enhanced debugging for Stimulus
-
Beyond translations in Stimulus: formatting dates, time and currency
-
Touch Events (swipe) using Stimulus
-
Translations in Stimulus Controllers
-
Using the Keyboard with Stimulus
-
Build a Notion-like editor with Rails, part 2
-
Create an Animated Counter in Stimulus
-
How to Send Requests from Stimulus Controllers
-
Use cases for Turbo's Custom Events
-
Advanced Stimulus: Custom Action Options
-
Why Disconnect in Stimulus Controllers
-
Stimulus Features You (Didn't) Know
-
Inheritance with Stimulus Controller
-
Store UI State in localStorage with Stimulus
-
Hotwire and Stimulus Tools You Need to Know
-
Basic Autocomplete Without JavaScript using Datalist
-
Broadcast Turbo Streams without Redis
-
How do Turbo Streams Work (behind the scenes)
-
Changing CSS as You Scroll with Stimulus
-
Smooth Transitions with Turbo Streams
-
ActiveStorage Direct Upload with Stimulus
-
Drag & Drop Images with Preview using Stimulus Outlets
-
Conditionally Style Turbo Frame Content
-
Create a Resizable Navigation with Stimulus
-
Connected and Disconnected Target Callbacks with Stimulus
-
Building Nested Forms in Rails with Stimulus
-
Refactor Stimulus.js Controllers to Use Change Callbacks
-
Launch a Turbo Modal with URL Params Using Stimulus
-
Nested Forms With Turbo (without dependencies)
-
Preview an Image Before Upload with Hotwire/Stimulus
-
Inline Save and Add Another with Rails and Hotwire
-
Add a “X is writing…” with Rails and Turbo
-
Update a Progress Bar using Turbo Streams (using Custom Actions)
-
Communicating between Stimulus Controllers using Outlets API
-
Customize the Turbo Progress Bar
-
Custom Confirm Dialog For Turbo and Rails
-
How to Create a Stimulus Toggle Class Controller
-
How to Add Disabled State to Buttons with Turbo & Tailwind CSS
-
ViewComponent over Turbo Stream Broadcasts
-
Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
-
How to Toggle Multiple CSS Classes with Stimulus
-
How to Properly Structure Stimulus Controller
-
How to implement and customize Rails Flash Messages (notifications)
-
Conditionally Add CSS Classes in Your Stimulus Controllers
-
How to add a skeleton UI to Rails with Turbo
-
How to add Hotkeys to your Rails App with Stimulus
-
How to create Modals with Rails and Hotwire (and Tailwind CSS)