In-Context Editing

Lean CMS lets content editors modify pages directly on the live site — no separate admin dashboard required for day-to-day edits.

How it works

When a user with CMS permissions is logged in, two editing mechanisms are activated:

  1. Section overlays — Any section wrapped with cms_editable_section gets a hover-activated dashed border and a sticky “Edit” button. Clicking Edit opens the field editor for that section in a new tab.

  2. Inline editing — Fields rendered with editable_content are directly clickable on the page. Clicking a field opens an inline input; saving updates the content without a page reload.

Both mechanisms are invisible to regular visitors. The wrappers render as plain HTML elements with no extra attributes unless a CMS user is logged in.

The editing gate

In-context editing only activates when all three conditions are true:

  1. The request is authenticated (authenticated? returns true)
  2. The current user has CMS permissions (current_user.has_any_cms_permission?)
  3. The in_context_editing setting is enabled (default: true)

The setting can be toggled in the CMS settings panel without a redeploy — useful if you want to temporarily disable editing on a site.

Enabling in your views

Wrap any page section to get the hover overlay:

<%= cms_editable_section(page: 'home', section: 'hero', display_title: 'Hero') do %>
  <section class="hero">
    ...
  </section>
<% end %>

For settings-backed content (phone number, address, hours), use the settings variant:

<%= cms_settings_section(display_title: 'Contact Information', anchor: 'site-info') do %>
  <address>...</address>
<% end %>

The overlay button for settings sections links to the Settings admin page rather than a page content editor.

Table of contents