Inline Editing

Inline editing lets editors click directly on a text value in the page and edit it in place. No modal, no page reload — the change saves via Turbo and the new value appears immediately.

Usage

Replace page_content with editable_content for any field you want to be inline-editable:

<%# Read-only: %>
<h1><%= page_content(@page, 'hero', 'heading') %></h1>

<%# Inline-editable for CMS users, read-only for visitors: %>
<h1><%= editable_content('hero', 'heading') %></h1>

editable_content uses the implicit @page set in your controller. You can override it:

<%= editable_content('hero', 'heading', page: @other_page) %>

What editors see

When a logged-in editor clicks on an editable_content field:

  • The text becomes an editable input or textarea
  • A small save/cancel control appears
  • Saving POSTs the new value to the CMS API and updates the page without a full reload
  • The change is recorded in PaperTrail with the editor’s user ID

Visitors see the same tag (<span> by default) rendered as plain HTML.

Changing the wrapper tag

By default the field is wrapped in a <span>. Pass tag: to change it:

<h1><%= editable_content('hero', 'heading', tag: :h1) %></h1>
<p><%= editable_content('hero', 'subheading', tag: :p) %></p>

Default content

If no value is stored in the database yet, show a fallback:

<%= editable_content('hero', 'heading', default: 'Your heading here') %>

Undo

Every inline save creates a PaperTrail version. Editors can undo the last change to any field directly from the page — a small undo control appears after saving. Clicking undo reverts to the previous version and is also tracked as a version.

Supported types

Inline editing works best with text fields. For rich_text, image, cards, and bullets, use the Field Editor (section overlay → Edit button) rather than inline editing.