turbo

Request spec: Turbo Stream template is rendered

For controller-level confidence, I add a request spec that sets Accept: text/vnd.turbo-stream.html and asserts the response includes a turbo stream action. This is faster than a system test and catches accidental template name changes (create.turbo_st

Tabs UI using Turbo Frames (no client router)

Tabs often turn into a mini-SPA. Instead, I treat each tab as a URL and load its content into a turbo_frame_tag named tab_content. Clicking a tab link targets that frame. This gives you browser history, deep linking, and sharable URLs, while keeping t

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

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

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