Runtime Props Reference

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. 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 defined in your manifest.
• Element props: Data for inner elements 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 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 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:

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

See all available data types.

Element props

When you define elements with data in your manifest, the props for those elements appear in the elementProps object. For nested elements, they appear under their parent's elementProps.

Example

A card wrapper component that accesses nested element props:

Example manifest for this component:

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.

Example manifest for this component:

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.

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 Make your component selectable.

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 panel, along with preset and layout styling.

className is separate from the class that your manifest's selector 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:

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.

Presets wrapper props

When your component uses presets, wrap your component in a container element and apply wix.presetsWrapperProps. These props contain styling and tracking data for preset functionality.

Presets wrapper example

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

See also

• Data Types
• Elements
• Presets
• Tutorial | Configure Auto Panels for an Editor React Component