Turbo Frames: Inline edit that swaps form <-> row

6493 views

                  <%= turbo_frame_tag dom_id(project) do %>
  <div class="flex items-center justify-between">
    <div>
      <strong><%= project.name %></strong>
      <span class="text-sm text-gray-500"><%= project.slug %></span>
    </div>
    <%= link_to 'Edit', edit_project_path(project), class: 'btn' %>
  </div>
<% end %>

                  <%= turbo_frame_tag dom_id(@project) do %>
  <%= form_with model: @project do |f| %>
    <div class="field"><%= f.text_field :name %></div>
    <div class="field"><%= f.text_field :slug %></div>
    <div class="actions">
      <%= f.submit 'Save', class: 'btn-primary' %>
      <%= link_to 'Cancel', project_path(@project), class: 'btn' %>
    </div>
  <% end %>
<% end %>

Inline editing works best when the frame boundary is small and stable (one row). Render the display state inside a frame, then link to edit inside the same frame. Submit swaps it back. This keeps controllers simple and UI snappy.

Sarah Chen

More from Sarah Chen

Turbo Frames: Inline edit that swaps form <-> row

0 Comments

More from Sarah Chen