CodeSnips

turbo-frames

Turbo Frames: infinite scroll with lazy-loading frame

Infinite scroll can be done with plain HTML + Turbo Frames. Render a “next page” frame with loading: :lazy so Turbo fetches it when it enters the viewport. No JS required, and it degrades gracefully.
by Sarah Chen
0
0

Frame navigation that targets a specific frame via form_with

Sometimes a form submission should update a specific section rather than navigate the whole page. With Turbo, this is as easy as setting data-turbo-frame on the form. For example, a filter form can target a results frame, so submissions replace only t
by Henry Kim
0
0

Turbo Frames: “details” panel that lazy-loads on click

For pages with expensive secondary data (audit trail, related entities), keep initial render fast and lazy-load a details frame only when the user asks. This is a clean performance pattern for admin pages.
by Sarah Chen
0
0

Inline edit a table row with Turbo Frames

For admin-ish UIs, inline editing is the best balance of speed and clarity. I wrap each row in a turbo_frame_tag keyed by dom_id(record) and render either a read-only row partial or an edit form partial inside the same frame. Clicking “Edit” targets t
by Henry Kim
0
0

Lazy-load heavy panels with IntersectionObserver + Turbo frame

Not every part of a page needs to load immediately. For heavy panels (analytics charts, audit logs), I use a Turbo Frame with src and a tiny Stimulus controller that sets the src when the element becomes visible via IntersectionObserver. This avoids f
by Henry Kim
0
0

Infinite scrolling list using lazy Turbo Frames

Turbo Frames can implement infinite scrolling without a JS router. I render the first page normally and append a “next page” frame at the bottom with loading: :lazy. When the user scrolls and the frame enters view, Turbo fetches the next page automati
by Henry Kim
0
0

Render without layout for Turbo Frame requests

A classic Turbo foot-gun is returning a full layout inside a frame, which results in nested <html> and weird styling. The simplest fix is layout -> { turbo_frame_request? ? false : 'application' } at the controller level. I use this when I ha
by Henry Kim
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

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

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

Scoped navigation inside a sidebar with Turbo Frames

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