> 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 Reference

## Article: Runtime Props Reference

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

## Article Content:

# Runtime Props Reference

When the editor loads your [Editor React Component (ERC)](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components.md), 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 ERC 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 Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-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/site-extensions/editor-react-components/editor-element/data/data-overview.md) defined in your manifest.
- **Element props**: Data for inner [elements](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) defined in your manifest.
- **Standard props**: The `id` and `className` props, which you must apply to your component's root element.
- **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 `id` and `className` props, and an optional `wix` prop.

## Data props

Each key in your manifest's [`data`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.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. For the TypeScript types 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):

```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/site-extensions/editor-react-components/editor-element/data/data-overview.md#available-data-types).

## Element props

When you define [elements](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) with [data](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.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:** `id` and `className` are top-level props and will not appear in nested `elementProps`.

### Example

A card wrapper component that accesses nested element props:

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

interface CardItemProps {
  cardTitle: string;
}

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

  return (
    <div id={id} 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 `id` and `className` props automatically from Wix. Your component must accept both and apply them to its root element. These props are what connect your React code to the editor. Without them, the editor can't select or style your component.

> **Note:** `id` and `className` are top-level props only. They don't appear in nested `elementProps`.

### `id`

The editor's unique identifier for this instance of your component on the page.

Apply `id` to your component's root element. The editor uses it to find the individual instance of your component in the page's DOM. If you don't apply it, your component still renders, but Wix users can't click it to select it, and the action bar and auto panels never open for it.

`id` is one half of what makes a component selectable. The other half is the manifest's `selector` matching a class on that same root element. For both, see [Component Requirements](https://dev.wix.com/docs/site-extensions/editor-react-components/component-requirements.md#component-selection).

Pass the value straight through, unchanged. Don't generate your own value, and don't use it as a prefix for other DOM ids without appending a suffix, since the value must stay unique on the page.

### `className`

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

Apply `className` to the same root element as `id`. The editor uses it to deliver the values that Wix users set in the [Design](https://dev.wix.com/docs/site-extensions/editor-react-components/about-auto-panels-for-editor-react-components.md) panel, along with preset and layout styling.

`className` is separate from the class that your manifest's [`selector`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) matches. Your root element needs both: your own selector class, which you write as a literal string, and the `className` value that the editor passes in.

#### Standard props example

Apply both props to the root element, alongside the class that your manifest `selector` targets:

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

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

For this component, the manifest sets `selector: '.my-component'`.

## Wix integration props

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

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

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

### Elements removal state

Tracks which of your component's direct child elements a Wix user removed in the editor. Each key is an element key from the manifest, and each value is `'REMOVED'`. Only elements with `removable: true` in their [behaviors](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md#inline-element) can be removed. See the [removable element example](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md#removable-element-with-display-toggle) for a full manifest setup.

Don't render any element marked as `'REMOVED'`.

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

### Presets wrapper props

When your component uses [presets](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/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 {
  id: string;
  className: string;
  wix?: Wix;
}

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

> **Note:** `id` and `className` go on the inner element, not on the wrapper. The wrapper renders with `display: contents` and is invisible to the editor, so the inner element is what the editor tracks for selection and layout.

## See also

- [Component Requirements](https://dev.wix.com/docs/site-extensions/editor-react-components/component-requirements.md)
- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Elements](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md)
- [Presets](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets.md)
- [About Editor React Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/overview/about-editor-react-types.md)