hotwire

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

My favorite Hotwire demo is the classic “inline create” on an index page. The form sits at the top of the page. When submitted, the create action returns turbo streams that (1) prepend the new item into the list and (2) replace the form with a fresh,

Turbo Streams enable surgical DOM updates from the server without writing JavaScript. After a successful form submission, instead of redirecting, I return a Turbo Stream response that appends, prepends, replaces, or removes specific elements. This is

Sometimes you want only part of the screen to navigate—like a sidebar list updating the main content. Turbo Frames can do this cleanly: render the sidebar normally, and make its links target a turbo_frame_tag called main. Clicking a link swaps the mai

A common UI is a list on the left and a details panel (drawer) on the right. With Turbo Frames, each list item link can target a details frame. Clicking an item swaps the drawer content while leaving the list intact. The server still renders HTML, so

For batch operations, Stimulus can manage the UI state (select all, indeterminate checkbox) while Turbo submits a regular form. This keeps the server in charge of authorization and the UI simple.

Stimulus brings just enough JavaScript to make static Rails views interactive while staying close to the HTML. Controllers connect to DOM elements via data-controller, and actions bind to events with data-action. I use Stimulus for client-side validat

Real-time search enhances discoverability but naive implementations hammer the server with requests. I use Turbo Frames to scope search results and a Stimulus controller to debounce input events, only sending requests after typing pauses. The search f

When forms live inside a Turbo Frame (modal or inline edit), validation needs to feel immediate without a full-page refresh. I render the form inside a frame with an ID like post_form. On submit, create/update returns status: :unprocessable_entity and

When replacing DOM chunks, morphing reduces flicker and preserves focus/selection. If you enable morphing, prefer server-rendered HTML that’s stable and keyed. It’s a subtle but meaningful quality improvement.

Broadcasting is powerful, but it’s also easy to accidentally leak updates if everyone subscribes to a global stream. My default is to scope streams to a tenant boundary (like Current.account) and a resource. That means turbo_stream_from [current_accou