Custom Turbo Stream action: reset a form after success

After a successful inline create, I usually want to clear the form. You can replace the whole form partial, but sometimes you want to preserve other state (like which field was focused) and simply reset values. A clean Hotwire approach is a custom Tur

Action Mailbox: broadcast incoming emails into a feed

For apps that ingest emails (support inbox, replies), Action Mailbox is a natural fit. When a message arrives, I create a record and broadcast it into a Turbo Stream feed so the UI updates in realtime. This is essentially “email as an event source”. T

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

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

Broadcasts refreshes for complex pages (less target wiring)

When a page has many small targets, wiring dozens of Turbo Stream operations can get noisy. Rails’ broadcasts_refreshes (Rails 7.1+) lets you take a pragmatic approach: broadcast a refresh, and Turbo morphs the page. It’s not always the right choice (

Preview Active Storage uploads after attach using Turbo Streams

For image uploads, I like immediate previews. With Active Storage, you can render the preview server-side once the blob is attached, and use Turbo Streams to update the preview area. The form submits to an endpoint that attaches the blob and returns a

Collapse/expand UI with Stimulus that survives Turbo swaps

Simple disclosure components are everywhere: FAQ, details panels, advanced filters. I keep them as progressive enhancement: the HTML is valid and readable, and Stimulus adds toggling behavior. The controller toggles a hidden class and updates aria-exp

Turbo Streams: inline “saved” indicator that updates on autosave

Users trust autosave when they can see it. I render a small #save_state region (“Saved just now”, “Saving…”, “Offline”) and update it via Turbo Streams. The autosave endpoint returns a stream that replaces the indicator, and optionally updates a hidde

Filter UI that syncs query params via Stimulus (no front-end router)

Filters are better when the URL reflects state. I use a small Stimulus controller that updates the query string as filters change, then triggers a Turbo visit (often with data-turbo-action='replace'). This gives shareable URLs and correct back-button

Keyboard shortcut “command palette” modal (Hotwire-first)

A command palette feels like a SPA feature, but you can do it Hotwire-first: place a turbo_frame_tag 'modal' in the layout and load the palette HTML into it. A small Stimulus controller listens for meta+k and navigates the modal frame to /palette. The

Server-rendered skeleton UI for slow frames

For slow endpoints, I like a skeleton placeholder rather than a blank area. Turbo Frames make this easy: render a “loading skeleton” inside the frame tag as the initial content, then set src so Turbo fetches the real content. When the response arrives

Use data-turbo-action to control history (advance vs replace)

Turbo Drive records visits in browser history. For some interactions (like typing through search results), you don’t want every click to create a new history entry. Turbo supports data-turbo-action='replace' to replace the current history entry instea