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 cssCustomProperties property of the manifest lets you define CSS custom properties (CSS variables) that Wix users can customize through the editor. Unlike cssProperties, where keys must be standard CSS property names, cssCustomProperties lets you define your own variable names, giving you full control over how style values are applied to your component.
You can define cssCustomProperties in editorElement and in elements of type inlineElement.
When a Wix user customizes your component, the editor sets these variables as CSS custom properties on the element. Your component's CSS must consume them using var(). The connection between the manifest and the rendered styles flows through your CSS, so you decide which CSS properties each variable maps to, and you can use a single variable in multiple places or combine it with other values.
cssCustomProperties is a map where each key is a variable name without the -- prefix, such as customBorder or iconColor, and each value is a CSS custom property item. Every item must include a cssPropertyType field, which tells the editor what type of control to display for that variable.
The CSS data type or CSS property this variable represents.
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 custom property item.
Custom dropdown options with multiple style applications. Required when cssPropertyType is customEnum.
Numeric constraints including min, max, and multiplier. Only relevant when cssPropertyType is number.
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.
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.
Supported CSS data types:
angleblendModecolorcustomEnumlengthlengthPercentagenumberpercentagestringtimeSupported property types.
CSS data properties:
angle, blendMode, customEnum, length, lengthPercentage, number, percentage, string, timeBackground properties:
background, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSizeMargin properties:
Padding properties:
Border properties:
border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderColor, borderEndEndRadius, borderEndStartRadius, borderInlineEnd, borderInlineEndColor, borderInlineEndStyle, borderInlineEndWidth, borderInlineStart, borderInlineStartColor, borderInlineStartStyle, borderInlineStartWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStartEndRadius, borderStartStartRadius, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidthFont and text properties:
color, font, fontFamily, fontSize, fontStretch, fontStyle, fontVariant, fontWeight, letterSpacing, lineHeight, textAlign, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textShadow, textTransform, writingModeLayout and display properties:
alignItems, alignSelf, boxShadow, columnGap, display, flexDirection, gap, height, justifyContent, opacity, overflow, rowGap, widthEffects properties:
SVG properties:
The following defines two CSS custom properties: iconSize for controlling icon dimensions, and brandColor for setting the primary brand color with an error state variant.
The CSS custom properties defined in the manifest don't apply any styles on their own. Your component's CSS must consume these variables using var() to connect them to actual style rules:
The following defines a custom enum that lets Wix users select an icon position relative to the button text using a dropdown in the editor.
The following defines a numeric CSS custom property for controlling animation speed, with constraints that limit the value between 0 and 5 seconds in increments of 0.1.