Henry Kim

A modal that opens without focusing an input is a tiny annoyance that adds up. In Hotwire apps, modals often swap in via Turbo Frames, which means the DOM is injected after navigation. Stimulus is ideal here: attach an autofocus controller to the moda

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

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

I don’t test Hotwire behavior by guessing; I add system tests that exercise the UI. With Capybara, I click a button that triggers a Turbo Stream response and assert that the DOM changes without a full page reload. The exact assertion depends on the fe

In a Turbo app, returning the right HTTP status is not optional—it controls how Turbo treats the response. For invalid form submissions, return 422 Unprocessable Entity and render the form with errors. If you mistakenly return 200, Turbo may treat it

For forms with multiple fields, I like an error summary at the top. With Turbo Streams, you can update just the summary target when validation fails. This is helpful when the form is long and the user might not see inline errors immediately. The serve

Even with model broadcasts, it’s useful to know how streams map to ActionCable channels. Turbo::StreamsChannel is essentially a channel that streams from a signed stream name. When I need custom behavior, I still follow the same scoping rules: identif

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

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

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

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

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 (