<%= turbo_frame_tag dom_id(contact) do %>
<tr class="contact-row">
<td><%= contact.name %></td>
<td><%= contact.email %></td>
<td><%= contact.role.titleize %></td>
<td class="actions">
<%= link_to "Edit", edit_contact_path(contact), class: "btn btn-sm" %>
<%= link_to "View", contact_path(contact),
data: { turbo_frame: "_top" }, class: "btn btn-sm btn-ghost" %>
</td>
</tr>
<% end %>
<%= turbo_frame_tag dom_id(contact) do %>
<tr class="contact-row editing">
<%= form_with model: contact, class: "contents" do |f| %>
<td>
<%= f.text_field :name, class: "input" %>
<% if contact.errors[:name].any? %>
<span class="field-error"><%= contact.errors[:name].to_sentence %></span>
<% end %>
</td>
<td><%= f.email_field :email, class: "input" %></td>
<td>
<%= f.select :role, Contact::ROLES.map { |r| [r.titleize, r] }, {}, class: "input" %>
</td>
<td class="actions">
<%= f.submit "Save", class: "btn btn-sm btn-primary" %>
<%= link_to "Cancel", contact_path(contact), class: "btn btn-sm btn-ghost" %>
</td>
<% end %>
</tr>
<% end %>
class ContactsController < ApplicationController
before_action :set_contact, only: %i[show edit update]
def show
render partial: "contacts/contact", locals: { contact: @contact }
end
def edit
render partial: "contacts/form", locals: { contact: @contact }
end
def update
if @contact.update(contact_params)
render partial: "contacts/contact", locals: { contact: @contact }
else
render partial: "contacts/form",
locals: { contact: @contact },
status: :unprocessable_entity
end
end
private
def set_contact
@contact = Contact.find(params[:id])
end
def contact_params
params.require(:contact).permit(:name, :email, :role)
end
end
Inline editing lets a user click an "Edit" link on a table row and have that single row transform into an edit form in place, without a full page reload or a modal. This snippet shows the canonical Hotwire approach using a Turbo Frame that wraps each row so only that row is swapped when the frame's contents are replaced.
The key idea is that a <turbo-frame> with a stable id acts as an addressable region: any navigation or form submission originating inside the frame targets only that frame, and Turbo replaces the frame's contents with the matching frame from the response. In _contact.html.erb, each row is wrapped in turbo_frame_tag dom_id(contact), which produces a unique id like contact_42. The "Edit" link navigates to edit_contact_path, and because that link lives inside the frame, Turbo fetches the edit page and extracts the frame with the same id from it.
That matching frame is defined in _form.html.erb, again using turbo_frame_tag dom_id(contact). When the edit response comes back, only the row's frame swaps from a read-only display into the form. The "Cancel" link points back at the contact's show/frame path so the row can be restored without submitting anything.
ContactsController ties it together. The edit action just renders the row partial containing the form frame. On update, the successful branch re-renders _contact — Turbo sees a frame with the same id and swaps the form back into the static row, giving the illusion of an in-place save. The failure branch re-renders _form with status: :unprocessable_entity so validation errors appear inside the frame; returning a non-2xx status is important because Turbo will still process the frame but signals the error.
The trade-off is that each row becomes an independent navigation context, so links must explicitly break out with data-turbo-frame or target: "_top" when they should affect the whole page. This pattern is ideal for editable tables and admin CRUD screens where a modal would be heavy and a full reload would lose scroll position and context. It degrades gracefully: without JavaScript, the frame links behave as ordinary full-page navigations.
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.
