Native and Custom Actions

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.

The actions and customActions properties control the toolbar that appears when a Wix user selects your component in the editor.

Where to define

You can define actions and customActions in editorElement and in elements of type inlineElement.

  • Native actions are derived from your component's manifest and generated automatically by the editor. For example, data items produce a settings action, and cssProperties produce a design action. If you don't define an actions object at all, the editor generates these for you. You can override them using the actions property.
  • Custom actions are additional buttons you define using the customActions property. They appear as labeled text buttons before the icon-based native actions.

Each action is a key-value pair. The key is the action's identifier, and the value is an object.

Native actions

Native actions are defined using the actions property. All fields are optional since the editor provides defaults. Defining execution on a native action overrides its default behavior.

settingsAction

Controls the component's data and content editing experience.

designAction

Controls the component's visual styling experience.

mediaAction

Controls replacing or uploading media.

manageItemsAction

Controls adding, removing, and reordering items in a list.

dashboardDashboardAction

Opens a dashboard page extension.


Note: Additional native actions, such as presets for components with templates, may also appear depending on your component's capabilities.

Custom actions

Custom actions are defined using the customActions property. Each custom action requires a displayName and an execution. For the full list of execution types, see Execution Types. Custom actions can be defined at the root editorElement level or on elements in the elements map, allowing child elements to have their own dedicated actions.

Examples

Hide a native action

The following example hides the media action from the action bar:

Copy

Override display names

The following example overrides the display name of the settings and design actions:

Copy

Redirect manageItems

The following example redirects manageItems to target the slides array by providing an execution object:

Copy

For the full list of execution types, see About Execution Types.

Dashboard action

The following example opens a specific dashboard page when the user clicks the action:

Copy

Custom action with panel

The following example adds a "Change Colors" button that opens a panel:

Copy
Did this help?