> 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: Runtime Props

## Article: Props

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

## Article Content:

# Runtime Props Reference
<blockquote class="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>


When the editor loads your component, it reads your manifest and passes the current values for each defined property as React props. As Wix users make changes in the editor, your component receives updated props. This page documents the props your component receives at runtime and how they map to your manifest definitions.

If you're new to the manifest structure, start with [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md). That page explains what each manifest section configures in the editor, while this page explains how those declarations appear in your runtime component API.

Your component receives the following prop categories:

- **Data props**: Values from the [`data`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md) defined in your manifest.
- **Element props**: Data for inner [elements](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) defined in your manifest.
- **Standard props**: The `className` prop for styling.
- **Wix integration props**: The [`wix` object](#wix-integration-props) for editor features.

## Quick mapping from manifest to props

Use this as a fast translation layer while implementing your component:

- `editorElement.data` maps to top-level props on your component.
- `editorElement.elements` maps to nested `elementProps` for inner elements.
- Platform-managed integrations map to top-level `className` and optional `wix` props.

## Data props

Each key in your manifest's [`data`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md) object becomes a prop in your component. The `dataType` you specify determines the runtime type and format of each prop.

For example, when you define data types in your manifest:

```typescript
data: {
  title: {
    dataType: "text",
    displayName: "Product Name"
  },
  price: {
    dataType: "number",
    displayName: "Price"
  },
  productImage: {
    dataType: "image",
    displayName: "Product Image"
  },
  inStock: {
    dataType: "boolean",
    displayName: "In Stock"
  }
}
```

In your component, each key becomes a prop name with the corresponding runtime type. TypeScript types for all props are available from the [`@wix/editor-react-types`](https://www.npmjs.com/package/@wix/editor-react-types) package:

```typescript
import type { Image } from '@wix/editor-react-types';

interface Props {
  title: string;
  price: number;
  productImage: Image;
  inStock: boolean;
}
```

See all available [data types](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md).

## Element props

When you define [elements](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) with [data](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md) in your manifest, the props for those elements appear in the `elementProps` object. For nested elements, they appear under their parent's `elementProps`.

```typescript
interface ElementProps {
  [dataKey: string]: DataType;
  elementProps?: Record<string, ElementProps>;
}
```

> **Note:** `className` is a top-level prop and will not appear in nested `elementProps`.

### Example

A card wrapper component that accesses nested element props:

```tsx
interface CardWrapperProps {
  className: string;
  listTitle: string;
  elementProps: {
    cardItem: CardItemProps;
  };
}

interface CardItemProps {
  cardTitle: string;
}

function CardWrapper({ className, listTitle, elementProps }: CardWrapperProps) {
  const cardItemProps = elementProps.cardItem;

  return (
    <div className={`${className} card-wrapper`}>
      <h3>{listTitle}</h3>
      <CardItem {...cardItemProps} />
    </div>
  );
}
```

Example manifest for this component:

```typescript
{
  type: "CardWrapper",
  editorElement: {
    selector: ".card-wrapper",
    displayName: "Card List",
    data: {
      listTitle: {
        dataType: "text",
        displayName: "List Title",
        defaultValue: "Featured Items"
      }
    },
    elements: {
      cardItem: {
        elementType: "inlineElement",
        inlineElement: {
          selector: ".card-item",
          displayName: "Card Item",
          data: {
            cardTitle: {
              dataType: "text",
              displayName: "Card Title",
              defaultValue: "Card Title"
            }
          }
        }
      }
    }
  }
}
```

### Nested element props

Element props can nest multiple levels deep when elements contain other elements.

#### Nested props example

A component demonstrating multiple levels of nesting, where child elements have their own configurable properties accessible through nested `elementProps`.

```tsx
import type { VectorArt } from '@wix/editor-react-types';

interface Props {
  elementProps: {
    card: {
      cardTitle: string;
      elementProps: {
        cardHeader: {
          headerText: string;
          headerIcon: VectorArt;
        };
      };
    };
  };
}

function Component({ elementProps }: Props) {
  const cardProps = elementProps.card;
  const headerProps = cardProps.elementProps.cardHeader;
  
  return (
    <div className="card">
      <div className="card-header">
        <Icon svg={headerProps.headerIcon} />
        <h3>{headerProps.headerText}</h3>
      </div>
      <div className="card-body">
        <h4>{cardProps.cardTitle}</h4>
      </div>
    </div>
  );
}
```

Example manifest for this component:

```typescript
{
  type: "NestedCard",
  editorElement: {
    selector: ".card",
    displayName: "Card",
    data: {
      cardTitle: {
        dataType: "text",
        displayName: "Card Title",
        defaultValue: "Card Title"
      }
    },
    elements: {
      cardItem: {
        elementType: "inlineElement",
        inlineElement: {
          selector: ".card-header",
          displayName: "Card Header",
          data: {
            headerText: {
              dataType: "text",
              displayName: "Header Text",
              defaultValue: "Header"
            },
            headerIcon: {
              dataType: "vectorArt",
              displayName: "Header Icon"
            }
          }
        }
      }
    }
  }
}
```

## Standard props

Every component receives the `className` prop automatically from Wix. This prop enables styling and proper integration with the editor.

> **Note:** `className` is a top-level prop only and will not appear in nested `elementProps`.

### `className`

CSS class names for your component's root element, including styling from the editor and presets.

#### className example

Apply `className` to the root element:

```tsx
interface ComponentProps {
  className: string;
  // ... other props
}

function MyComponent({ className, ...otherProps }: ComponentProps) {
  return (
    <div className={className}>
      {/* Component content */}
    </div>
  );
}
```

## Wix integration props

Your component receives the `wix` prop object from the Wix platform. It includes integration features such as preset styling.

<!--
```typescript
interface Wix {
  elementsRemovalState: Record<string, 'REMOVED'>;
  presetsWrapperProps?: { className: string };
}
```

### Elements removal state

Tracks which elements a Wix user has removed in the editor. The object contains keys for each removed element, with the value `'REMOVED'`. Only elements with `removable: true` in their [behaviors](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) and `'none'` in their [`displayValues`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#display-values) can be removed. See the [removable element example](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) for a full manifest setup.

Your component should check `elementsRemovalState` and avoid rendering any element marked as `'REMOVED'`.

```typescript
type ElementRemovalState = Record<string, 'REMOVED'>
```
-->

```typescript
import type { Wix } from '@wix/editor-react-types';
```

```typescript
interface Wix {
  presetsWrapperProps?: { className: string };
}
```

### Presets wrapper props

When your component uses [presets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md), wrap your component in a container element and apply `wix.presetsWrapperProps`. These props contain styling and tracking data for preset functionality.

```typescript
type PresetWrapperProps = { className: string }
```

#### Presets wrapper example

A button component that uses preset wrapper props to enable preset functionality:

```tsx
import type { Wix } from '@wix/editor-react-types';

interface ButtonProps {
  className: string;
  wix?: Wix;
}

function Button({ className, wix }: ButtonProps) {
  const presetsWrapperProps = wix?.presetsWrapperProps || {};
  
  return (
    <div {...presetsWrapperProps}>
      <button className={className}>Click</button>
    </div>
  );
}
```

## See also

- [Data Types](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md)
- [Elements](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md)
- [Presets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md)
- [Tutorial | Configure Auto Panels for an Editor React Component](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/tutorial-configure-auto-panels.md)