Help Center

Menu

Best practices for inline editing components

Here are some best practices when designing components with inline editing elements.

Collapse non-essential fields by default

If a field is unlikely to be edited frequently, consider hiding it by default in the sidebar to keep the editing interface clean and focused for Content Editors. For example, internal settings like id, className, or technical toggles.

accordion advanced collapsed
Figure 1. Developer-only fields collapsed like wrapper classes and debug flags.
collapsedByDefault example
"ui:metadata": {
    "collapsedByDefault": true
}

Prioritize essential fields for Quick Edit

Page Builder content page assets display all Quick Edit options within a single panel. The panel can become crowded and harder to navigate if there are too many.

Include only those fields that are relevant for content editors. Fields that are unlikely to be updated frequently — or that control layout or technical behavior — can either be excluded or collapsed by default.

quick edit essential fields
Figure 2. Choose what fields add value to content editors

Provide meaningful default values

Giving a default text value for fields like heading, label, or buttonText makes the initial experience smoother for editors. They will see real content they can select and edit instantly.

The heading appears immediately in the component preview. It makes inline editing available immediately and removes the need to open the sidebar to fill it in.

meaningful default values
Figure 3. Meaningful values in fields
Code example
"heading": {
  "type": "string",
  "title": "Heading",
  "description": "The main heading text.",
  "default": "Heading",
  "ui:metadata": {
    "inlineEditable": true
  }
}