hotwire

Toast notifications delivered with Turbo Streams

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

Scroll into view after append using a custom Turbo Stream action

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

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

Frame-powered inline “quick view” that falls back to full page

A “quick view” is basically a show page rendered inside a frame. I implement it by adding a turbo_frame_tag 'quick_view' on the index page, and making item links target that frame. If Turbo is disabled or if the response doesn’t include the frame, the

Turbo Frame for inline editing without page reloads

Turbo Frames scope navigation to a specific section of the page, making inline editing feel instant without full page reloads. When a link or form inside a <turbo-frame> is submitted, only that frame's content updates. I use this pattern extensi

Optimistic UI updates with Turbo Streams

Waiting for server confirmation makes interfaces feel sluggish. Optimistic updates immediately show the expected result, then reconcile with the server response. When a user likes a post, I increment the count immediately via Stimulus, submit the requ

Typing indicator via ActionCable + Turbo Streams

Typing indicators can be done without a complex protocol. I broadcast a small turbo stream replace to a typing_indicator target when a user starts typing, and another replace to clear it after a timeout. On the client, a Stimulus controller sends “typ

Turbo Frame modal that renders server HTML

When I need a modal (new/edit/show), I avoid client-side templating by using a dedicated turbo_frame_tag as the modal container (often id='modal'). Links target that frame, so the response only replaces the modal content. Closing the modal is just swa

Turbo Drive: disable caching on volatile admin pages

Turbo Drive caches pages aggressively, which is usually great. For volatile admin dashboards (counts, queues, toggles) you often want no-cache to avoid confusing “stale UI” bugs. turbo_cache_control makes the intent explicit.

Active Storage direct upload progress with Stimulus

Direct uploads are great because they keep file traffic away from your Rails dynos, but the default UX is opaque. I attach a Stimulus controller that listens for Active Storage’s direct-upload:* events and updates a progress bar. This keeps the markup

Broadcast a status badge update on background processing

A lot of Rails apps have records that transition through states: queued, processing, done. With Hotwire, I render a status badge partial and broadcast replacements when the state changes. A background job updates the record, and the model broadcasts a

Stimulus: debounced search that plays nicely with Turbo

Client-side debounce is best done in Stimulus (not in view helpers). This controller submits the nearest form after a short pause, while letting Turbo handle the navigation and frame replacement.