Data Overview

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.

Where to define

You can define data in:

• editorElement
• elements of type inlineElement

The data property is optional.

Data item fields

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.

Core fields

Type-specific fields

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.

Default values and runtime fallbacks

A data item's defaultValue populates the matching control in the editor panel. It doesn't set the value your component receives as a prop.

This means your component can't rely on defaultValue to render. Its defaults have to live in your component code.

If your project includes a generated <component-name>.props.ts file, set the fallback values in its defaultProps constant:

This is the single source of truth for your defaults, and you don't need to write defaultValue into your data items at all. <component-name>.extension.ts passes defaultProps to withEditorElementDefaults, which fills in the manifest's default values for you, so the editor panels open showing the same values your component renders.

If you do set defaultValue by hand, keep it consistent with your component's fallback. When the two disagree, the editor panel shows one value while the component renders another, which reads as a bug to Wix users.

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. For the TypeScript object shapes available from @wix/editor-react-types, see About Editor React Types.

Available data types organized by category: