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 layout property controls resize directions, content sizing, stretch, positioning, rotation, and duplication behavior for your component in the editor. It works together with installation.initialSize, which sets the starting dimensions, and layout controls how the Wix user can change them from there.
You can define layout in editorElement, or override it per preset inside presetDefaults.layout.
Caution: You can only apply layout to the root editorElement, not to elements.
The layout object supports the following fields:
Which directions the Wix user can manually resize the component.
Which directions the component automatically resizes to fit its content.
When true, hides the 'stretch to full width' option. Useful for buttons, inline elements, and components with fixed aspect ratios.
When true, prevents free positioning. The component stays in document flow. Use for components that must stay in flow or elements that shouldn't overlap others.
When true, hides the rotation handle. Use for text blocks, form elements, and containers with interactive children.
When true, prevents duplicating the component. Use for elements that should only appear once on a page, such as a header logo, or components tied to unique data.
Specifies which data item fills the component's visible area.
Caution: When contentResizeDirection includes a direction, the editor sizes the component's container to fit its content in that direction. This means your component's CSS can't use parent-relative values like height: 100% for that dimension, because the parent itself has no fixed size. Without a fixed value or content that takes up space, the component may collapse to zero.
The patterns below show how different combinations of resizeDirection and contentResizeDirection work for common component types.
The Wix user sets the width in the editor, and the height grows automatically as content wraps.
This pattern also works for progress bars, inline labels, and single-line inputs.
The Wix user can resize freely in the editor. The image scales to fill the component without pushing its boundaries out, and contentFill enables the editor's cropping tools.
This pattern also works for videos, background media, and maps.
Resizing preserves the aspect ratio. The image fills the component but doesn't auto-resize.
This pattern also works for icons, avatars, and thumbnails.
The Wix user can resize the component in both directions, while the height adjusts automatically to fit the content, such as the label, icon, or spacing.
This pattern also works for tags, chips, and call-to-action banners.
The Wix user controls the height in the editor. Children fill the component's visible area. To make the component span its parent's width on install, set installation.initialSize.width.sizingType to 'stretched'. For details, see installation.
This pattern also works for sections, panels, card groups, and sidebars.
The Wix user can't resize the component. Its content or fixed dimensions entirely determine the component's size.
This pattern also works for badges, status indicators, and separators.