erb 31 lines · 2 tabs

Turbo Frame for inline editing without page reloads

Jordan Lee Jan 2026

2 tabs

<div class="post">
  <h1><%= @post.title %></h1>

  <%= turbo_frame_tag "post_#{@post.id}" do %>
    <div class="post-content">
      <%= simple_format @post.body %>
    </div>

    <% if can? :edit, @post %>
      <%= link_to "Edit", edit_post_path(@post), class: "btn btn-secondary" %>
    <% end %>
  <% end %>
</div>

<%= turbo_frame_tag "post_#{@post.id}" do %>
  <%= form_with model: @post, class: "space-y-4" do |f| %>
    <div>
      <%= f.label :title %>
      <%= f.text_field :title, class: "form-input" %>
    </div>

    <div>
      <%= f.label :body %>
      <%= f.text_area :body, rows: 10, class: "form-input" %>
    </div>

    <div class="flex gap-2">
      <%= f.submit "Save", class: "btn btn-primary" %>
      <%= link_to "Cancel", post_path(@post), class: "btn btn-secondary" %>
    </div>
  <% end %>
<% end %>

2 files · erb Explain with highlit

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 extensively for edit-in-place workflows where users click edit, modify content, and save—all without leaving the page. The data-turbo-frame attribute on links can target frames by ID, enabling cross-frame navigation. The key advantage is progressive enhancement: if JavaScript fails, forms still work with traditional full-page submissions. I also use lazy-loaded frames with src and loading='lazy' to defer expensive rendering until the frame scrolls into view.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

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

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

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

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<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)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Turbo Frame for inline editing without page reloads — share card

Link copied