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 presets property lets you define named visual variations of your component. Each key in the presets map is the preset's unique identifier, which is referred to as the preset key throughout this documentation. Each value configures the preset's display name, thumbnail, sizing, default values, and optional style overrides.
You can define presets in editorElement.
Important: For presets to work, your component must wrap its root element in a container and spread wix.presetsWrapperProps onto it.
Each preset item has 2 fields that control its appearance: presetDefaults and styleOverrides. Both are optional, and they serve different purposes:
presetDefaults to define the initial values that apply when a Wix user switches to a preset. This includes layout behavior, CSS properties, CSS custom properties, display filters, and nested element defaults. These values replace the component's base configuration for that preset.styleOverrides when you need breakpoint-aware or state-aware value overrides. For example, you might use styleOverrides to set a different hover color on mobile, or to adjust font sizes across breakpoints. Overrides in the default breakpoint cascade to all other breakpoints, while small overrides apply only to the mobile breakpoint.Each item in the presets map accepts the following properties:
The name shown in the editor's preset selector. Maximum 100 characters. Translatable.
A valid web URL to a thumbnail image for the preset, displayed in the editor's preset panel. Must start with `http://` or `https://`. 13 to 500 characters.
The initial size of the component when switching into this preset.
Per-preset style values that vary across breakpoints, with optional state support. Use to override CSS property values for the root element and inner elements at different breakpoints.
Restrict this preset to specific breakpoints in the editor panel. If omitted, the preset appears at all breakpoints. Maximum 2 items.
A URL to a CSS file that the editor applies when a Wix user selects this preset. Maximum 500 characters.
Default values that take effect when a Wix user selects this preset.
The installation.presets object maps breakpoints to preset keys, controlling which preset the component starts with when first added to the page.
The preset key to use at the large (desktop) breakpoint.
The preset key to use at the small (mobile) breakpoint.
The following defines 2 presets for a line component, 1 horizontal and 1 vertical, each with different initial sizes and layout defaults.
The following configures layout, CSS property defaults, and display filters for a menu preset. The displayFilters object controls which elements, actions, and properties appear in the editor for this preset. In this case, it shows the navbar element and hides the manageMenu action.
The following configures CSS custom property defaults for a nested line element.
The following sets the initial width to 120 pixels and the height to fit the content.
The following sets the horizontal preset for both breakpoints and defines a default initial width of 280 pixels.
The following overrides background color with state-specific hover values at the default breakpoint, and adjusts font size for mobile.