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 elements property lets you make inner parts of your component independently selectable and configurable in the editor. Each element gets its own selector, display name, and optional data, styling, states, and actions. When a Wix user clicks on that part of your component, they see controls specific to it rather than the whole component.
For example, a product card with a title, image, and buy button could define each part as a separate element. Clicking the button in the editor opens controls for just that button, such as its text, link, colors, and states, without affecting the rest of the card.
You can define elements in editorElement and in other elements of type inlineElement.
Important: Elements can nest multiple levels deep. When an element defines data, those values are passed to your component inside the elementProps object rather than as top-level props. Nested elements appear under their parent's elementProps. For more information, see Props.
Each entry in the elements map is an element item. It specifies the element's type and contains the corresponding configuration object.
The element type. Supported values: inlineElement or refElement. Only inlineElement is currently supported.
Configuration for the element when elementType is 'inlineElement'.
Configuration for the element when elementType is 'refElement'. Not yet supported.
An inline element is a custom element you define from scratch with its complete configuration.
CSS selector targeting the element in your component's DOM.
Name shown in the editor.
Data properties for this element, passed as props to your component.
Nested child elements in this element.
Controls editor interactions.
Native platform actions available for this element.
Developer-defined custom actions specific to your component.
Predefined style or layout variations.
Semantic classification hint for AI and editor features.
Define component states for preview and testing.
Links element visibility to a component state for conditional display.
Control visibility of properties in the editor panel.
Group related properties together in the editor panel for better UX.
Direct CSS properties applied to the element.
CSS custom properties declared with names prefixed by `--`, for reusable values referenced with `var()`.
Link to a help article for this element. Set `url` to the full URL of the help article.
Caution: Support for ref elements is under development. See Unsupported features.
A ref element references an existing Wix component and optionally overrides its properties.
The type identifier of the Wix component to reference.
CSS selector for where this element appears in your DOM.
Override the referenced component's display name in the editor.
Override how data properties are displayed or disable their editing.
Override the referenced component's editor behaviors.
Override or hide native actions from the referenced component.
Override custom actions from the referenced component.
Links element visibility to a component state for conditional display.
Control visibility of properties in the editor panel.
Override how CSS properties are displayed or disable their editing.
Override how CSS custom properties are displayed or disable their editing.
Link to a help article for this element. Set `url` to the full URL of the help article.
A progress bar with CSS custom properties and non-selectable sub-elements.
A button component with a removable icon element. Setting removable: true lets Wix users toggle the element on or off. The display CSS property with displayValues controls which display states are available when the element is visible.