turbo-streams

Destructive actions should feel immediate. For delete links inside a list, I return a Turbo Stream that does turbo_stream.remove dom_id(record). That removes the DOM node without re-rendering the rest of the list, which avoids the common “jump” effect

For search-as-you-type, I keep the server in charge and use a small Stimulus controller to debounce form submission. The controller listens to input events, waits ~250ms, then triggers a normal Turbo form submit. The server responds with index.turbo_s

Presence is usually overkill, but for collaboration features it’s valuable: show who’s online in a room. I identify connections with current_member in ApplicationCable::Connection, then in a channel I broadcast updates when members subscribe/unsubscri

If a feature is fundamentally “live” (comments, activity), I reach for model broadcasts. Rails can broadcast Turbo Stream fragments on after_create_commit, and the UI subscribes with turbo_stream_from. The beauty is that it’s still server-rendered HTM

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

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

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

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

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

A modal is just a frame boundary. Load the modal content into a dedicated frame, then on submit broadcast/stream a close action plus a list update. You get “SPA modal UX” without a frontend router.

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

When appending new content (like a new message), I sometimes want to scroll it into view automatically. Rather than adding JS in the controller, I use a custom turbo stream action scroll_into_view that finds the target element and calls scrollIntoView