Installation

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.

The installation property controls how your component appears when a Wix user first adds it to a page, including its initial dimensions, which preset it starts with, and where it's placed. It works together with layout: installation sets the starting size, and layout controls how the Wix user can resize from there.

Where to define

You can only define installation at the root level of your manifest, alongside properties like type and editorElement. See the manifest structure.

Installation properties

The installation object supports the following properties:

initialSizeInitialSizeRequired

Dimensions when first added to the page.


presetsPresets

Preset keys for different screen sizes.


targetContainerTargetContainer

Where to place the component on the page.

Initial size

The initialSize property controls the starting dimensions when a Wix user first adds your component to a page. Each dimension (width and height) is configured independently with a sizing type.

Examples

Fixed width with content-driven height

The component has a set width but grows vertically to fit its content. This is the most common pattern, used by text components, accordions, and tabs.

Copy

Full-width with content-driven height

The component stretches to fill its parent section while the height adjusts to content. Useful for banners, marquees, and full-width layouts.

Copy

Fully content-driven

Both dimensions adjust to the component's content. This works for components with an intrinsic size, like icon bars or badges.

Copy

Fixed dimensions with aspect ratio lock

The component maintains its width-to-height ratio when the user resizes it. Use preserveAspectRatio only when both dimensions use 'pixels' sizing. Primarily useful for media components like images, videos, and logos.

Copy

Different presets for desktop and mobile

Copy

See also

Did this help?