CodeSnips

turbo

Build Turbo Stream responses in the controller (TagBuilder)

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
by Henry Kim
0
0

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
by Henry Kim
0
0

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
by Henry Kim
0
0

Morphing page updates with Turbo Morphing

Traditional Turbo Drive replaces the entire <body>, which can cause flickering and lose scroll position. Turbo Morphing (using idiomorph algorithm) intelligently diffs the DOM and updates only changed elements, preserving focus, scroll, and tran
by Jordan Lee
0
0

Inline markdown preview using Turbo Frames

A markdown preview doesn’t need a client markdown parser. I render the preview server-side (same pipeline used in production), and load it into a Turbo Frame. The editor form includes a frame called preview, and a “Preview” button submits the form to
by Henry Kim
0
0

Autosave drafts with Stimulus + Turbo (lightweight)

For long text entry, autosave is a huge quality-of-life improvement. I implement it with a Stimulus controller that debounces input and submits the form to a drafts endpoint in the background. The response is a turbo stream that updates a “Saved at …”
by Henry Kim
0
0

Turbo Frames modal: load, submit, then close via stream

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.
by Sarah Chen
0
0

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
by Henry Kim
0
0

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
by Henry Kim
0
0

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
by Henry Kim
0
0

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
by Henry Kim
0
0

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
by Jordan Lee
0
0