OnRailsBlog

Build accessible, animated modal dialogs in Rails using Stimulus.js and Hotwire — no third-party libraries required.

Build a headless UI toggle switch in Rails using a Stimulus outlet to coordinate state between two separate controllers.

Progressively enhance our filtered search using Stimulus and Turbo

Filter a list of records in real time with Hotwire Turbo Frames and Stimulus.js — no full page reloads required.

With the addition of the new Todo form appearing at the bottom of the Todos, and the delete action removing a Todo, we have a very functional app. It would be nice if those additions and removals had a little animation to emphasize what’s happening on the page. If there was a long list, we might miss the deletion, especially if a network request caused a delay in the removal of the Todo. We can hook into Turbo streams, and run some animations on these actions to make them appear and disappear.

Explore your options for managing HTML state in a Hotwire app — from data attributes to Stimulus values to Turbo frames.

With the new morphing features in Turbo 8, you now need to decide on when to use Turbo streams or Turbo frames instead of full page refreshing. Thankfully, all three techniques work together.

Add smooth CSS animations and drag-to-reorder to a Stimulus-powered todo list for a polished, interactive experience.

Listen for real-time updates over ActionCable in a Hotwire app and stream them directly into the page with Turbo Streams.

Implement drag-and-drop list reordering in a Hotwire Rails app using Stimulus.js and the Sortable library.