Section Editing

Section editing lets you make an entire block of content editable as a single unit. The HTML structure — headings, paragraphs, lists — is preserved.

Basic usage

<section inline-cms>
  <h2>About us</h2>
  <p>We build great things for the web.</p>
  <ul>
    <li>Feature one</li>
    <li>Feature two</li>
    <li>Feature three</li>
  </ul>
</section>

When an editor clicks this section in edit mode, the entire block becomes contentEditable. They can:

• Edit text within any child element
• Add or remove paragraphs, headings, and list items
• Restructure the content freely

All changes are saved as a single HTML field, preserving the full structure.

How it works

1. The Vite plugin transforms <section inline-cms> into <InlineSection>
2. The field type is automatically inferred as richtext for container elements
3. When editing, innerHTML is captured (not innerText), preserving tags
4. Content is sanitized before storage to prevent XSS
5. On load, stored HTML is rendered via React’s dangerouslySetInnerHTML

Which elements support section editing?

Any block-level container automatically uses richtext mode:

Element	Field type
<section>	richtext
<div>	richtext
<article>	richtext
<aside>	richtext
<main>	richtext

Section editing vs element editing

Choose based on your needs:

Feature	Element editing	Section editing
Granularity	Per-element	Per-section
HTML structure	Plain text only	Full HTML preserved
Use case	Individual fields	Content blocks
Annotation	inline-cms on each element	inline-cms on the container

Tip: Don’t nest inline-cms on individual elements inside a section that already has inline-cms. The section captures the entire block — nested annotations would conflict.

HTML sanitization

All editor-produced HTML is sanitized before storage. The sanitizer:

• Allows: h1-h6, p, ul, ol, li, strong, em, a, blockquote, code, pre, img, br, span, div, section, article, figure, figcaption, table elements
• Allows attributes: href, src, alt, title, class, id, target, rel
• Strips: script, style, iframe, event handlers (onclick, etc.), javascript: URLs

The sanitizeHTML utility is also exported from @inlinecms/react for custom use:

import { sanitizeHTML } from '@inlinecms/react'

const clean = sanitizeHTML(userInput)

Fallback behavior

When no CMS content exists yet (first visit), the section renders its original JSX children. After the first edit and publish, the stored HTML takes over.