Broadcast job progress updates to a Turbo Frame

Long-running jobs are where Hotwire can feel magical: start an export, then watch progress update live. I give each job a “progress” model, render it in a turbo_frame_tag, and broadcast replacements as the job advances. The job updates percent and sta

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

Disable Turbo Drive on external links

Turbo Drive is great for internal navigation, but I disable it for external links or pages that should do a full reload (third-party auth, docs). data-turbo='false' is the simplest switch: it tells Turbo not to intercept the click, so the browser hand

Handle 401 responses in Turbo by forcing a full redirect

When a session expires, Turbo can end up swapping a login page into a frame, which is confusing. A practical fix is to detect 401 responses on the client and trigger a full-page visit (Turbo.visit) to the login URL. This keeps the app consistent and a

Attach custom headers to Turbo fetch requests (stimulus-free)

Sometimes you need to attach a header to every Turbo request (like a feature-flag variant, or a client version). Turbo emits turbo:before-fetch-request, which lets you mutate the outgoing request before it is sent. I keep the handler tiny and global (

Customize Turbo progress bar styling with Tailwind/CSS

Turbo includes a progress bar at the top of the page, and it’s a surprisingly visible part of perceived quality. I like to set the color and height to match the app’s brand. This is pure CSS: target .turbo-progress-bar. You can also make it slightly t

Keep navbar state across Turbo navigations with data-turbo-permanent

Some UI elements should survive navigation: a music player, a search input, or a navbar with an open dropdown. Turbo’s data-turbo-permanent lets you mark a DOM node that shouldn’t be replaced during visits. I use it carefully—permanent nodes can keep

Toast notifications delivered with Turbo Streams

Toasts are a great fit for Turbo Streams because they’re ephemeral UI that doesn’t need a dedicated page. I keep a #toasts container in the layout and turbo_stream.append a toast partial on success events. The toast itself is just HTML with a Stimulus

Custom turbo_stream action tag: highlight an updated element

Turbo gives you a handful of built-in stream actions (append, replace, remove), but sometimes you want behavior like “replace then highlight”. You can implement this as a custom action: send a turbo-stream with action='highlight' and include a templat

Speed up perceived performance with Turbo preload links

Turbo can preload pages on hover (or on touchstart) which makes navigation feel instantaneous. I use data-turbo-preload on links that are likely to be clicked (like list item titles). The server still controls caching and ETags, so it remains safe and

Pagination links that escape a Turbo Frame with _top

Sometimes a frame is great for partial navigation, but sometimes you explicitly want a full-page visit. Pagination is a common case: when the page number changes, I often want the URL to update and the browser history to behave normally. You can tell

Multi-step wizard navigation with Turbo Frames

Wizards are often over-engineered with client state machines. With Turbo Frames, I render each step inside a frame, and the “Next” button simply POSTs to update the record and then redirects to the next step URL. If validation fails, I re-render the s