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.
This article provides practical examples of using native actions, custom actions, and display filters in your component manifests.
A simple override that changes the labels without changing the behavior:
The TemplateContainer component adds a "Settings" custom action that dispatches an event to the editor script:
The Button component surfaces its child AnimatedIcon's customization panel. The AnimatedIcon is a ref element with selectable: false, so users can't select it directly. The forward action lets the parent Button expose the icon's editing UI.
When using actionName: "custom", the target element must have a matching customActions entry in its own manifest. In this case, the AnimatedIcon component defines customActions.animatedIcon which the forward action invokes.
The Slideshow component overrides manageItems to manage slides, and adds a custom forward action for the navigation icon:
Quick-access buttons for specific styling controls:
The following example uses hide to remove specific actions and data items from the editor:
The following example uses show to allow only the settings and design actions to be visible: