Help Center

Menu

Inline editing tips

This is a short collection of tips and examples for enabling inline editing in custom components used within Content Page assets.

It covers common patterns, field configuration, and things to watch out for when working with nested objects, arrays, and special field types.

Accessing fields in nested structures

When defining data-sq-field, the path must match the JSON structure defined in the manifest (input.properties). Here’s how to handle common scenarios:

Flat structure

If your schema has a flat object (no nesting), you can reference fields directly by their name:

<!-- JSON: { "text": "Example text" } -->
<span data-sq-field="text">Example text</span>

Nested structure

If the field is nested inside an object, you’ll need to include the full path:

"properties": {
    "componentContent": {
        "type": "object",
        "properties": {
            "text": {
                "type": "string",
                "ui:metadata": {
                    "inlineEditable": true
                }
            }
        }
    }
}

Then in HTML:

<span data-sq-field="componentContent.text">Example text</span>

Arrays

For components that include arrays (like accordions, tabs, or sliders), inline editing for repeated items requires referencing the index in the path:

"accordion": {
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "heading": {
        "type": "string",
        "ui:metadata": {
          "inlineEditable": true
        }
      }
    }
  }
}
Render
${accordion.map((item, idx) => `
<h3 data-sq-field="accordion[${idx}].heading">${xssSafeContent(item.heading)}</h3>
`).join('')}
It is necessary to include the index idx in a loop and use it in the data-sq-field.

Limitations

A few limitations and edge cases to keep in mind:

  1. Fields using the matrix-asset-uri type cannot be edited inline at this time. Editors will need to use the right-side panel to update these fields.

  2. When using SquizLink types (like a button or anchor with text, url, and target), only the url field is editable inline — even if you wrap the entire anchor with data-sq-field="link".

    Example
    <a href="${link.url}" target="${link.target}" data-sq-field="link">
${link.text}
</a>

    In this case, only url will be editable in Page Builder.

  3. Be careful when using full-area overlays (like pseudo-elements or absolute-positioned elements that sit on top of the content). These often interfere with inline editing, making fields underneath unclickable or non-editable.

    Avoid covering editable text fields with position: absolute layers unless you absolutely have to.

    Anti-pattern example
    // Make the whole card area clickable, not just the title
&::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}