turbo

Action Text comment form that works inside a Turbo Frame

Action Text is great, but you need to be deliberate about how you render it in a Turbo-powered UI. I keep the comment form inside a turbo_frame_tag so it can be replaced on validation errors (still 422). On success, I clear the form by replacing the f

by Henry Kim

Inline edit a table row with Turbo Frames

For admin-ish UIs, inline editing is the best balance of speed and clarity. I wrap each row in a turbo_frame_tag keyed by dom_id(record) and render either a read-only row partial or an edit form partial inside the same frame. Clicking “Edit” targets t

by Henry Kim

Stimulus toast auto-dismiss for Turbo-appended notifications

When toasts are appended via Turbo Streams, they should self-dismiss without extra wiring. I attach a Stimulus controller to the toast element that schedules removal after a delay (and allows manual close). This means the server only needs to render a

by Henry Kim

Undo delete with a Turbo Stream “restore” action

Undo is a great UX improvement for destructive actions. My approach is: on destroy, soft-delete the record (or keep enough data to restore), remove it from the list via turbo_stream.remove, and append a toast with an “Undo” link. Clicking “Undo” hits

by Henry Kim

Fragment caching inside Turbo Frames (fast lists)

Hotwire doesn’t replace caching—it makes it more valuable because you’re sending HTML frequently. I use fragment caching inside list partials and keep cache keys stable with cache blocks. The pattern is: cache each row by record, and cache the list wr

by Henry Kim

Turbo Streams: append server-side validation warnings

Sometimes you want to show non-blocking warnings (e.g., “link looks unreachable”) while still saving. Turbo streams can append warnings to a panel without rerendering the whole page.

by Sarah Chen

Lazy-load heavy panels with IntersectionObserver + Turbo frame

Not every part of a page needs to load immediately. For heavy panels (analytics charts, audit logs), I use a Turbo Frame with src and a tiny Stimulus controller that sets the src when the element becomes visible via IntersectionObserver. This avoids f

by Henry Kim

Turbo Streams: update document title with a custom action

Sometimes the DOM updates but the browser tab title stays stale (e.g., unread count, active chat room). A neat Hotwire trick is a custom Turbo Stream action that sets document.title. The server emits a <turbo-stream action='set_title'> with a te

by Henry Kim

Infinite scrolling list using lazy Turbo Frames

Turbo Frames can implement infinite scrolling without a JS router. I render the first page normally and append a “next page” frame at the bottom with loading: :lazy. When the user scrolls and the frame enters view, Turbo fetches the next page automati

by Henry Kim

Render without layout for Turbo Frame requests

A classic Turbo foot-gun is returning a full layout inside a frame, which results in nested <html> and weird styling. The simplest fix is layout -> { turbo_frame_request? ? false : 'application' } at the controller level. I use this when I ha

by Henry Kim

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

by Henry Kim

Build Turbo Stream responses in the controller (TagBuilder)

Most of the time I prefer *.turbo_stream.erb templates, but for small one-off responses it can be nice to generate streams directly in the controller using Turbo::Streams::TagBuilder. This keeps the logic close to the action and avoids creating a temp

by Henry Kim