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 editorElement object is the core of the manifest. It defines the component's root selector and display name, and declares everything that should be customizable from data and styling to layout, presets, and states.
Each property you define in editorElement automatically generates editor UI, so you don't need to build settings panels yourself. For a summary of what each property generates, see About Auto Panels.
You can only define editorElement at the root level of your manifest, alongside properties like type and resources.
The editorElement object supports the following properties:
CSS class or selector on the root DOM element of your component, such as `.my-button`. The editor uses this to locate the component, apply CSS overrides from `cssProperties`, and set CSS variables from `cssCustomProperties`. Minimum 4, maximum 50 characters.
Name shown in the editor when the Wix user interacts with the component. Minimum 4 characters. Maximum 20 characters. Translatable.
Data properties for the component. Each key is a data item name and each value is a data item definition. Passed to the component as props at runtime.
Standard CSS properties applied as overrides in the scope of the component. Each key is a CSS property name and each value is the property configuration.
CSS custom properties (variables) applied in the scope of the component. Each key is the custom property name and each value is the property configuration.
Inner elements of the component with their own data, styling, and behaviors. Each key is a unique element identifier.
Override default editor actions for the component. Optional, and not recommended if you want the standard editor experience.
Developer-defined custom actions for the component. Each key is a unique action identifier. Use for custom behaviors or integration with external domains.
Named visual variations of the component, each with an optional CSS file. Complementary to the default CSS file in resources. Each key is a unique preset key.
Default values for presets, CSS properties, CSS custom properties, and data of inner elements. Required if you want design panels to show initial values for inner elements.
Layout capabilities of the component, including resize behavior, content sizing, and positioning.
Conditions like hover or disabled that change how the component looks based on user interactions.
Control which properties, elements, and actions appear in the editor panels. Applied first, before preset and state filters.
Semantic classification of the component for AI tools and editor behaviors.
Triggers and effect groups for declarative animations that Wix users can configure.
Group related properties together in the editor for better organization. Each key is a unique display group identifier.
The following defines a button component with editable text, a style variant dropdown, a link, and a disabled toggle. It exposes background color, text color, and padding as design controls, a custom border radius variable, horizontal-only resizing, two visual presets, and a custom action that opens a panel.
The following defines a card component that uses displayGroups to organize its properties into logical sections in the editor panels. Border-related CSS properties are grouped together, CSS custom properties for visual effects are grouped separately, and data items for content are in their own group.
Last updated: 17 May 2026