Henry Kim

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

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

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

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

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

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

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

Nested fields are a common Rails pain point, and the old solution was heavy JS gems. With Stimulus, I keep it minimal: render a hidden <template> containing the fields with a placeholder index, then on “Add” clone it and swap the placeholder for

Counters (likes, votes, bookmarks) are classic UI glue. I keep the counter itself in a small partial with a stable id and update it via turbo streams on create/destroy. The controller can render a turbo_stream.replace of the counter plus (optionally)

In Hotwire apps, I still use Rails’ RESTful routes heavily. For destructive actions from a link, data-turbo-method='delete' is the cleanest approach: you keep semantic links where appropriate and let Turbo perform the method override. I usually pair i

Once you’ve built a few Hotwire controllers, you notice the same respond_to shape repeated. I extract a small helper (a concern) that yields a respond_to block and centralizes the “default HTML redirect” pattern. This keeps controllers readable and re

After a POST, Turbo behaves best when you redirect with 303 See Other (Rails symbol :see_other). This avoids the browser trying to re-submit the POST when the user refreshes, and it plays nicely with Turbo Drive’s navigation semantics. I use it especi