Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.
Display groups let you combine related properties into single controls, link properties together, or control display order in the editor's auto-generated panels. Without display groups, the editor renders individual controls for each property, sorted by property type.
You can define displayGroups in editorElement and in elements of type inlineElement.
Display groups fall into 3 categories:
Note: Display filters and display groups operate independently. Display filters remove properties before the editor panel receives them. Display groups organize whatever properties remain.
Each key in the displayGroups map is a custom name you choose for the group (for example, outerPadding or cardBorder), and each value is an object with the following properties:
Label shown in the editor for this group. Maximum 20 characters. Translatable.
Determines the group behavior and the name of the sibling configuration key. For example, setting groupType: 'padding' means you must also add a padding key at the same level. See Group type categories for all available values.
Each group type requires additional configuration beyond the core fields. When you set a groupType, you must also add a sibling key with the same name that contains the type-specific configuration.
For example, a padding group type requires a padding key with the property mapping:
For details on each type and its configuration options, see the type reference pages in Group type categories.
The following group types are available, organized by category. Each type has its own configuration schema.
| Category | Group Types | Description |
|---|---|---|
| CSS Custom Properties | background, margin, padding, border, borderTop, borderRight, borderBottom, borderLeft, borderInlineStart, borderInlineEnd, borderColor, borderWidth, borderStyle, borderRadius, font, textDecoration, gap | Combine multiple CSS custom properties into a single compact shorthand control in the Design panel. Groups are type-safe: each slot only accepts properties with a matching cssPropertyType. |
| Manifest Properties | data, cssDataType, cssCustomProperties, presets, displayGroups | Control the display order and grouping of manifest properties in editor panels. |
| Text and Array | text, arrayItems, listItem | Coordinate CSS custom properties and data items for text editing, array management, and item display. |
Last updated: 17 May 2026