hotwire

Declarative model broadcasts with broadcasts_to (Rails 7)

When I’m on Rails 7+, I like broadcasts_to because it makes realtime behavior obvious in the model. Instead of writing explicit after_create_commit hooks, I declare that a model broadcasts to its parent or to a scope. Then Turbo uses conventional part

Stimulus: autofocus the first invalid field after Turbo update

Turbo stream re-renders can drop focus, which is rough for accessibility. Use turbo:render to focus the first invalid field inside a specific container. This feels “native” and reduces user friction.

Turbo Streams fallback to HTML for older clients

Even in a Hotwire-first app, I keep HTML fallbacks because it makes features robust and keeps endpoints usable for bots and scripts. In controllers, I almost always include format.html alongside format.turbo_stream. For example, on create I return tur

Hotwire-powered multi-step forms

Multi-step forms traditionally require complex JavaScript state management, but Hotwire makes them simple. Each step is a separate controller action that renders a Turbo Frame containing the current step's fields. Navigation between steps updates only

Lazy-loading Turbo Frames for performance

Loading everything on initial page render slows perceived performance. Lazy-loaded Turbo Frames defer expensive content until it's needed, keeping initial page loads fast. Setting loading='lazy' with a src attribute tells Turbo to fetch content when t

Stimulus: resilient confirmation for destructive actions

Turbo supports data-turbo-confirm, but sometimes you want a stronger confirmation step (type-to-confirm, extra context, multi-step). Stimulus lets you implement consistent confirmations without sprinkling JS across views.

Turbo Frames: conditional frame navigation for mobile vs desktop

Sometimes you want frame navigation on desktop but full-page navigation on mobile. You can decide the target frame at render time. This keeps UX tuned without duplicating controller actions.

Admin “quick toggle” with Turbo Streams and a single partial

Admin toggles (published/unpublished, featured/unfeatured) are a perfect Hotwire use case: server-rendered state, instant UI update. I render the toggle as a partial inside a frame, and the update action responds with a turbo stream replacing that fra

Turbo Streams: broadcast from a job for long operations

For long operations (imports, conversions), run work in a job and stream progress updates. The job emits broadcast_update_to so the UI updates live without polling.

Turbo Streams: partial page auth failure handling

When a session expires, Turbo requests can start returning 401/302 and the UI gets confusing. Handle unauthorized turbo requests explicitly: return a stream that updates a “session expired” banner or triggers a redirect.

Hotwire Turbo for SPA-like user experiences

Hotwire Turbo delivers SPA speed without JavaScript complexity. Turbo Drive accelerates navigation by replacing page body without full reload. Turbo Frames update page sections independently—click a frame link, only that frame refreshes. Turbo Streams

Custom confirm dialog with Stimulus (better than window.confirm)

data-turbo-confirm uses the browser confirm dialog, which is functional but not pretty. For a more polished app, I replace it with a Stimulus controller that intercepts clicks, shows a custom modal, and only proceeds if the user confirms. Turbo makes