> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: About Data

## Article: Data Overview

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# About Data
<blockquote className="caution">

__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.

</blockquote>


The `data` property of your manifest controls how Wix users configure component properties and what data your component receives at [runtime](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md). 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

{/* TODO: when refElements are supported, add here */}
You can define `data` in:

- [`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md)
- [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) 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

<PropertyList bordered>
  <Property
    name="dataType"
    type="DataType"
    required
    description="The type of data this item stores. Determines validation, UI controls, and runtime format."
  />
  <Property
    name="displayName"
    type="string"
    description="Label shown in the editor. If omitted, the property key is used."
  />
  <Property
    name="defaultValue"
    type="Value"
    description={<>Initial value when the component is first added. This is what initially appears in the settings panel for this item. Format must match the <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::81d665f8-9227-4096-949a-3906dbf97b46*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props">runtime.md prop format</a>.</>}
  />
</PropertyList>

### 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:

```typescript
editorElement: {
  data: {
    label: {
      dataType: "text",       
      displayName: "Label",    
      defaultValue: "Click",   
      text: {                 
        maxLength: 100,       
        minLength: 3,
      },
    },
  },
}
```

For details on each type and its configuration options, see the type reference pages in [Available data types](#available-data-types).

## 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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md). TypeScript types for all props are available from the [`@wix/editor-react-types`](https://www.npmjs.com/package/@wix/editor-react-types) package.

Available data types organized by category:

| Category | Data Type | Type-Specific Fields | Description |
|----------|-----------|---------------------|-------------|
| [Primitive Types](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/primitive.md) | `text` | ✓ | A simple text value. |
| | `number` | ✓ | Numeric values with optional validation constraints. |
| | `booleanValue` | ✗ | true or false. |
| | `guid` | ✗ | Globally unique identifier. |
| [Text Variations](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/text-variations.md) | `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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/date-and-time.md) | `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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/contact-information.md) | `email` | ✗ | Standard email address `RFC 5321`. |
| | `phone` | ✗ | Phone number with common formatting characters. |
| | `webUrl` | ✗ | URL with http or https scheme. |
| | `hostname` | ✗ | IANA hostname. |
| [Media](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/media.md) | `image` | ✓ | Wix Image object. |
| | `video` | ✓ | Wix Video object. |
| | `vectorArt` | ✓ | Wix Sanitized Vector Art (SVG). |
| | `audio` | ✗ | Wix Audio object. |
| [Link](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/link.md) | `link` | ✓ | Wix Link object. |
| [Container](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/container.md) | `container` | ✓ | Container for child components. |
| [Complex Types](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/complex-types.md) | `data` | ✓ | Complex nested data structure. |
| | `arrayItems` | ✓ | Array of data items. |
| | `menuItems` | ✗ | Site navigation menu items. |
| [Accessibility](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/accessibility.md) | `a11y` | ✓ | Accessibility fields. |
| [Event Handlers](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/event-handler-data.md) | `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. |