Execution Types

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.

Every action (native or custom) can specify an execution object that tells the editor what happens when the user clicks the action. The execution object contains an actionType field that determines the behavior, and a corresponding payload.

Execution properties

Each execution object accepts the following properties:

actionTypestringRequired

One of: 'data', 'panel', 'forward', 'event', 'cssProperty', 'cssCustomProperty', 'displayGroup'.


dataDataAction

Payload for data actions.


panelPanelAction

Payload for panel actions.


forwardForwardAction

Payload for forward actions.


eventEventAction

Payload for event actions.


cssPropertyCssPropertyAction

Payload for cssProperty actions.


cssCustomPropertyCssCustomPropertyAction

Payload for cssCustomProperty actions.


displayGroupDisplayGroupAction

Payload for displayGroup actions.

Examples

Data action

The following example opens the data-editing UI for the slides data item:

Copy

Panel action with panelId

The following example opens a panel registered in the app dashboard:

Copy

Inline panel from URL

The following example opens an inline panel that loads content from a URL:

Copy

Inline panel from code

The following example opens an inline panel rendered from a React component:

Copy

Forward action

The following example forwards a custom action to a child element. The target element (previewContainer) must define a customActions.togglePreview entry in its own manifest for this to work.

Copy

The following example forwards the manageMenu native action to a child navbar element:

Copy

Event action

The following example dispatches an onExportData event:

Copy

CSS property action

The following example opens the styling control for backgroundColor:

Copy

CSS custom property action

The following example opens the styling control for a CSS custom property:

Copy

Display group action

The following example opens the panel for a display group:

Copy

Last updated: 7 May 2026

Did this help?