> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Layout

## Article: Layout

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/layout.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Layout
<blockquote className="caution">

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

</blockquote>


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`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/root-properties/installation.md), which sets the starting dimensions, and `layout` controls how the Wix user can change them from there.

## Where to define

You can define `layout` in [`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md), or override it per preset inside [`presetDefaults.layout`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md).

<blockquote className="caution">

**Caution:** You can only apply `layout` to the root `editorElement`, not to [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md).

</blockquote>

## Layout properties

The `layout` object supports the following fields:

<PropertyList bordered>
  <Property
    name="resizeDirection"
    type="ResizeDirection"
    description="Which directions the Wix user can manually resize the component."
  >
    <ExpandableSection name="ResizeDirection values">
      Controls which directions the Wix user can manually resize the component. This affects resize handles and editing capabilities using AI.

      <PropertyList>
        <Property name="'horizontal'" description="The Wix user can adjust the width but not the height." />
        <Property name="'vertical'" description="The Wix user can adjust the height but not the width." />
        <Property name="'horizontalAndVertical'" description="The Wix user can adjust width and height independently." />
        <Property name="'aspectRatio'" description="The Wix user can scale both width and height proportionally." />
        <Property name="'none'" description="The Wix user can't manually resize the component." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="contentResizeDirection"
    type="ContentResizeDirection"
    description="Which directions the component automatically resizes to fit its content."
  >
    <ExpandableSection name="ContentResizeDirection values">
      <PropertyList>
        <Property name="'horizontal'" description="Width auto-adjusts to fit content." />
        <Property name="'vertical'" description="Height auto-adjusts to fit content." />
        <Property name="'horizontalAndVertical'" description="Both dimensions auto-adjust to fit content." />
        <Property name="'none'" description="Size isn't affected by content. Content scales to fit the component." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="disableStretching"
    type="boolean"
    description="When true, hides the 'stretch to full width' option. Useful for buttons, inline elements, and components with fixed aspect ratios."
  />
  <Property
    name="disablePositioning"
    type="boolean"
    description="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."
  />
  <Property
    name="disableRotation"
    type="boolean"
    description="When true, hides the rotation handle. Use for text blocks, form elements, and containers with interactive children."
  />
  <Property
    name="disableDuplication"
    type="boolean"
    description="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."
  />
  <Property
    name="contentFill"
    type="ContentFill"
    description="Specifies which data item fills the component's visible area."
  >
    <ExpandableSection name="ContentFill properties">
      Use `contentFill` when your component displays content that fills its entire visible area, such as an image, video, or background. This tells the editor which data item provides that content, enabling features like intelligent cropping.

      <PropertyList>
        <Property
          name="dataItemKey"
          type="string"
          description="The key of the data item that fills the component. Must reference a data item of type 'image', 'video', 'vectorArt', or 'container'. Max length: 100 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

<br />

<blockquote className="caution">

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

</blockquote>

## Common patterns

The patterns below show how different combinations of `resizeDirection` and `contentResizeDirection` work for common component types.

### Text block

The Wix user sets the width in the editor, and the height grows automatically as content wraps.

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "horizontal",
      "contentResizeDirection": "vertical",
      "disableStretching": true
    }
  }
}
```

This pattern also works for progress bars, inline labels, and single-line inputs.

### Image

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.

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "horizontalAndVertical",
      "contentResizeDirection": "none",
      "contentFill": {
        "dataItemKey": "image"
      }
    }
  }
}
```

This pattern also works for videos, background media, and maps.

### Logo

Resizing preserves the aspect ratio. The image fills the component but doesn't auto-resize.

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "aspectRatio",
      "contentResizeDirection": "none",
      "disableStretching": true,
      "contentFill": {
        "dataItemKey": "image"
      }
    }
  }
}
```

This pattern also works for icons, avatars, and thumbnails.

### Button

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.

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "horizontalAndVertical",
      "contentResizeDirection": "vertical",
      "disableStretching": true
    }
  }
}
```

This pattern also works for tags, chips, and call-to-action banners.

### Container

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`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/root-properties/installation.md).

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "vertical",
      "contentFill": {
        "dataItemKey": "children"
      }
    }
  }
}
```

This pattern also works for sections, panels, card groups, and sidebars.

### Fixed-size element

The Wix user can't resize the component. Its content or fixed dimensions entirely determine the component's size.

```json
{
  "editorElement": {
    "layout": {
      "resizeDirection": "none",
      "contentResizeDirection": "none"
    }
  }
}
```

This pattern also works for badges, status indicators, and separators.