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 cssProperties property of the manifest lets you define standard CSS properties that Wix users can customize through the editor. The editor reads these definitions and generates the appropriate design panel controls for each property. The key must be a valid CSS property name, such as border, backgroundColor, or fontSize. The editor applies the value directly to the element that matches the selector.
You can define cssProperties in editorElement and in elements of type inlineElement.
The manifest supports two ways to define styling: cssProperties and cssCustomProperties.
Use cssProperties when you want to apply a standard CSS property directly to an element. The editor maps the property to the appropriate design panel control automatically.
Consider cssCustomProperties instead when:
Each item defined under cssProperties accepts the following properties:
Label shown in the editor panel. Maximum 100 characters. Translatable.
Initial CSS value shown in the design panel.
Default CSS values for defined component states.
Disables the ability to edit this CSS property item.
Which filter effects to show in the editor panel. Only relevant for the filter property.
Which backdrop-filter effects to show in the editor panel. Only relevant for the backdropFilter property. Uses the same FilterFunction values as filter.
Which display options to show in the editor panel. Only relevant for the display property.
Which text direction options to show in the editor panel. Only relevant for the writingMode property.
Which background options to show in the editor panel. Only relevant for the background property.
CSS shorthand properties allow you to set multiple related CSS properties with a single declaration. When you define a shorthand property in the manifest, the editor panel displays separate controls for the core related properties.
Defines all border-related properties for all sides. Includes borderWidth, borderStyle, borderColor, and all directional variants.
Sets all background-related properties: backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundClip, backgroundOrigin, backgroundAttachment.
Controls spacing outside the element on all sides: marginTop, marginRight, marginBottom, marginLeft, marginInlineStart, marginInlineEnd.
Controls internal spacing inside the element: paddingTop, paddingRight, paddingBottom, paddingLeft, paddingInlineStart, paddingInlineEnd.
Sets all font-related properties: fontFamily, fontSize, fontWeight, fontStyle, fontVariant, fontStretch, lineHeight.
Defines all aspects of text decoration: textDecorationLine, textDecorationColor, textDecorationStyle, textDecorationThickness.
Sets corner rounding for all corners: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, and logical equivalents.
The following defines a border property with a dashed green default and a solid red override for the error state.
You can define a CSS property with an empty object to enable it with default editor behavior.
When you define a shorthand property like border, the editor displays separate controls for color, width, and style for all directional variants.
The following defines a filter property with blur, drop shadow, and contrast effects, and a backdropFilter with blur, brightness, and saturation effects.
The following defines a display property that lets Wix users choose between none, flex, and block layouts.
The following defines a writingMode property that lets Wix users choose between horizontal and vertical text directions.
The following defines a background property that opens the image media manager when a Wix user selects a background.