stimulus

Optimistic toggle button with Stimulus “revert on failure”

I like optimistic UI for tiny interactions (like “star” or “follow”) because it makes the interface feel instant. The tradeoff is handling failure cleanly. I implement this with Stimulus: flip CSS + text immediately, then submit a Turbo request in the

Autofocus first input when a Turbo modal opens (Stimulus)

A modal that opens without focusing an input is a tiny annoyance that adds up. In Hotwire apps, modals often swap in via Turbo Frames, which means the DOM is injected after navigation. Stimulus is ideal here: attach an autofocus controller to the moda

Stimulus: intersection observer for “mark as read”

For notifications/messages, it’s nice to mark items read when they actually enter the viewport. IntersectionObserver + Stimulus keeps it lightweight, and Turbo streams can update badges in real time.

Time-ago formatting with Stimulus (no heavy date libs)

For small UX touches like “3 minutes ago”, I don’t want to pull in a giant date library. A Stimulus controller can use Intl.RelativeTimeFormat plus a lightweight difference calculation. The server renders the ISO timestamp (via time_tag), and the cont

Turbo Streams: optimistic UI for likes with disable-on-submit

A small UX win: disable the like button immediately and re-enable on failure. Turbo gives you events; Stimulus coordinates button state and the server still returns the canonical count.