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 className prop for styling.
• 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 className and optional wix props.

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

className 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.

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