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 data property of your manifest controls how Wix users configure component properties and what data your component receives at runtime. When building custom components, you often want Wix users to configure specific properties like text, images, links, colors, or dates. Based on your data type definitions, the editor automatically generates the appropriate UI controls in panels in the editor. For example, if you define a date picker type, a date picker control appears when Wix users open the settings panel.
The displayName you provide becomes the label Wix users see in the editor panel.
You can define data in:
editorElementelements of type inlineElementThe data property is optional.
Each property in your data object is a data item. A data item is an object with core fields that every data type shares, plus type-specific fields for additional configuration.
The type of data this item stores. Determines validation, UI controls, and runtime format.
Label shown in the editor. If omitted, the property key is used.
Initial value when the component is first added. This is what initially appears in the settings panel for this item. Format must match the runtime prop format.
Some data types require or allow additional configuration beyond the core fields. When a type supports extra configuration, those options go in a field named after the type itself.
For example, a text data type can have a text field with validation options:
For details on each type and its configuration options, see the type reference pages in Available data types.
When you define data items in your manifest, you choose from a set of predefined data types. Each type comes with built-in validation, UI controls in the editor, and a corresponding runtime format. TypeScript types for all props are available from the @wix/editor-react-types package.
Available data types organized by category:
| Category | Data Type | Type-Specific Fields | Description |
|---|---|---|---|
| Primitive Types | text | ✓ | A simple text value. |
number | ✓ | Numeric values with optional validation constraints. | |
booleanValue | ✗ | true or false. | |
guid | ✗ | Globally unique identifier. | |
| Text Variations | textEnum | ✓ | A list of predefined textual values to choose from. |
richText | ✓ | HTML text with inline CSS styling. | |
regex | ✗ | Valid regex pattern. | |
direction | ✗ | Text direction. | |
| Date and Time | localDate | ✗ | Local date in ISO-8601 format YYYY-MM-DD. |
localTime | ✗ | Local time in ISO-8601 format hh:mm[:ss][.sss]. | |
localDateTime | ✗ | Local date-time in ISO-8601 format YYYY-MM-DDThh:mm[:ss][.sss]. | |
| Contact Information | email | ✗ | Standard email address RFC 5321. |
phone | ✗ | Phone number with common formatting characters. | |
webUrl | ✗ | URL with http or https scheme. | |
hostname | ✗ | IANA hostname. | |
| Media | image | ✓ | Wix Image object. |
video | ✓ | Wix Video object. | |
vectorArt | ✓ | Wix Sanitized Vector Art (SVG). | |
audio | ✗ | Wix Audio object. | |
| Link | link | ✓ | Wix Link object. |
| Container | container | ✓ | Container for child components. |
| Complex Types | data | ✓ | Complex nested data structure. |
arrayItems | ✓ | Array of data items. | |
menuItems | ✗ | Site navigation menu items. | |
| Accessibility | a11y | ✓ | Accessibility fields. |
| Event Handlers | onClick | ✗ | Click event handler. |
onChange | ✗ | Input change event handler. | |
onKeyPress | ✗ | Key press event handler. | |
onKeyUp | ✗ | Key up event handler. | |
onKeyDown | ✗ | Key down event handler. | |
onFocus | ✗ | Focus event handler. | |
onSubmit | ✗ | Form submit event handler. | |
function | ✗ | Custom function handler. |
Last updated: 7 June 2026