> 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: Data Overview

## Article: Data Overview

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md

## Article Content:

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

# Data Overview
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/site-extensions/editor-react-components/manifest-reference/runtime-props-reference.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

You can define `data` in:

- [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md)
- [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/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={<>The value that populates this item's control in the editor panel when the component is first added. This is for display in the panel only. It isn't the value your component receives at runtime, so define runtime fallbacks in your component code instead. See <a href="fallback::#default-values-and-runtime-fallbacks">Default values and runtime fallbacks</a>. Format must match the <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference">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).

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

```typescript
export const defaultProps = {
  title: 'Title',
  description: 'Description goes here',
} as const satisfies Omit<MyComponentProps, 'id' | 'className'>;
```

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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference.md). For the TypeScript object shapes available from `@wix/editor-react-types`, see [About Editor React Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/overview/about-editor-react-types.md).

Available data types organized by category:

| Category | Data Type | Type-Specific Fields | Description |
|----------|-----------|---------------------|-------------|
| [Primitive Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/primitive-data-types.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/site-extensions/editor-react-components/editor-element/data/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 Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/date-and-time-types.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 Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/contact-information-types.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 Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/media-data-types.md) | `image` | ✓ | Wix Image object. |
| | `video` | ✓ | Wix Video object. |
| | `vectorArt` | ✓ | Wix Sanitized Vector Art (SVG). |
| | `audio` | ✗ | Wix Audio object. |
| [Link Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/link-types.md) | `link` | ✓ | Wix Link object. |
| [Container Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/container-data-types.md) | `container` | ✓ | Container for child components. |
| [Complex Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md) | `data` | ✓ | Complex nested data structure. |
| | `arrayItems` | ✓ | Array of data items. |
| | `menuItems` | ✗ | Site navigation menu items. |
| [Accessibility Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/accessibility-types.md) | `a11y` | ✓ | Accessibility fields. |
| [Event Handler Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/event-handler-data-types.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. |