<%= turbo_frame_tag 'quick_view' do %>
<div class="text-gray-500">Select a post…</div>
<% end %>
<% @posts.each do |post| %>
<%= link_to post.title, post_path(post), data: { turbo_frame: 'quick_view' }, class: 'block py-1 hover:underline' %>
<% end %>
<%= turbo_frame_tag 'quick_view' do %>
<h2 class="text-lg font-semibold"><%= @post.title %></h2>
<div class="mt-2"><%= simple_format(@post.body) %></div>
<%= link_to 'Open full page', post_path(@post),
data: { turbo_frame: '_top' },
class: 'mt-3 inline-block underline' %>
<% end %>
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 browser will navigate to the normal show page (good progressive enhancement). This is a nice compromise between speed and complexity: you get a fast preview without implementing a JS modal router. For accessibility, I keep it as a normal link and avoid trapping focus unless I’m using a real modal. If you do want a modal, you can combine this with the modal frame pattern. The key is consistency: ensure the show response can render both full-page and frame-only (layout handling).
Related snips
class CommentsController < ApplicationController
before_action :set_post
def create
@comment = @post.comments.build(comment_params)System test: asserting Turbo Stream responses
class Post < ApplicationRecord
belongs_to :author, class_name: 'User'
has_many :comments, dependent: :destroy
scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
scope :draft, -> { where(published_at: nil) }ActiveRecord scopes for reusable query logic
module Api
module V1
class UsersController < BaseController
def show
user = User.includes(:profile).find(params[:id])ETags for conditional requests and caching
class PostsController < ApplicationController
def index
@posts = Post.includes(:author)
.order(created_at: :desc)
.page(params[:page])
.per(10)Turbo Frames: infinite scroll with lazy-loading frame
require "csv"
class PeopleCsvStream
include Enumerable
HEADERS = %w[id full_name email signed_up_at plan].freezeResilient CSV Export as a Streamed Response
<form data-controller="query-sync" data-action="change->query-sync#apply">
<select name="status" class="rounded border p-2">
<option value="">Any</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>Filter UI that syncs query params via Stimulus (no front-end router)
Share this code
Here's the card — post it anywhere.
