Group Containers

Tabs

Squeditor UI uses a strict 3-level hierarchy to organize controls. Understanding this structure is key to creating a clean editing experience.

The top-level containers are Tabs.

You can only use these IDs: content, style, and advanced, but you can change their labels.

squeditor.json

{
  "id": "content",
  "label": "Content",
  "accordions": [ ... ]
},
{
  "id": "style",
  "label": "Style",
  "accordions": [ ... ]
},
{
  "id": "advanced",
  "label": "Advanced",
  "accordions": [ ... ]
}

Structure

Hide properties

string

required

Unique identifier for the tab (e.g., "content", "style", "advanced").

label

string

required

The display name shown in the panel tabs of Squeditor interface.

accordions

array

required

An array of nested Accordion objects used to group related controls.

Learn more about Accordions.

Accordions

Accordions are the middle layer of Squeditor interface hierarchy (Tabs > Accordions > Controls). They group functionally related inputs—like “Typography”, “Spacing”, or “Colors”—to keep the sidebar clean and organized for the end-user.

squeditor.json

{
  "id": "hero_text",
  "label": "Hero Text",
  "default_open": true,
  "controls": [ ... ]
}

Structure

Hide properties

string

required

Unique identifier for the accordion within its specific tab.

label

string

required

The title text displayed on the collapsible accordion header.

default_open

boolean

If set to true, the accordion will be expanded when the tab is first opened. Useful for the most critical settings in a section.

controls

array

required

An array of Control objects (such as text, color, media) that map to editable properties in the HTML section.

Learn more about Controls.

Getting started

Configuration

Components

Other

Tabs

Accordions

​Tabs

​Accordions

Tabs

Accordions