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.

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 className prop for styling.
• Wix integration props: The wix object for editor features.

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.

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 className prop automatically from Wix. This prop enables styling and proper integration with the editor.

className

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

Example

Apply className to the root element:

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.

Example

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

See also

• Tutorial | Build a Manifest Step by Step
• Data Types
• Elements
• Presets