> 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: Installation

## Article: Installation

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/root-properties/installation.md

## Article Content:

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


# Installation
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`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/layout.md): `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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/root-properties/root-properties.md).

## Installation properties

The `installation` object supports the following properties:

<PropertyList bordered>
  <Property
    name="initialSize"
    type="InitialSize"
    required
    description="Dimensions when first added to the page."
  >
    <ExpandableSection name="InitialSize properties">
      <PropertyList>
        <Property
          name="width"
          type="SizeSetting"
          required
          description="Initial width configuration."
        >
          <ExpandableSection name="SizeSetting properties">
            <PropertyList>
              <Property
                name="sizingType"
                type="SizingType"
                required
                description="How the dimension should be calculated."
              >
                <ExpandableSection name="SizingType values">
                  <PropertyList>
                    <Property name="'content'" description="Fits to the component's content. Use for text blocks, accordions, or any component where content determines size." />
                    <Property name="'stretched'" description="Fills the parent container and tracks parent size changes. Use for full-width banners or components that should adapt to their container." />
                    <Property name="'pixels'" description="A fixed pixel value. Use when you want precise control over initial dimensions." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property
                name="pixels"
                type="number"
                description="Fixed size in pixels. Only used when sizingType is 'pixels'."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="height"
          type="SizeSetting"
          required
          description="Initial height configuration."
        />
        <Property
          name="preserveAspectRatio"
          type="boolean"
          description="Maintain width-to-height ratio when resizing."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="presets"
    type="Presets"
    description="Preset keys for different screen sizes."
  >
    <ExpandableSection name="Presets properties">
      Specify different presets for different screen sizes to ensure your component adapts appropriately. The values must match keys defined in your component's [presets](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets.md) configuration. If you omit `small`, the desktop preset cascades to mobile; setting `small` (or editing the component in the mobile view) breaks that cascade.

      <PropertyList>
        <Property name="default" type="string" description="Preset key for desktop view." />
        <Property name="small" type="string" description="Preset key for mobile view." />
      </PropertyList>

      <blockquote className="warning">

      __Deprecated:__ The `large` key is deprecated. Use `default` instead.

      </blockquote>
    </ExpandableSection>
  </Property>
  <Property
    name="staticContainer"
    type="StaticContainer"
    description="Where to place the component when a matching container exists on the stage."
  >
    <ExpandableSection name="StaticContainer values">
      <PropertyList>
        <Property name="'HOMEPAGE'" description="Place the component on the homepage." />
        <Property name="'GLOBAL_PAGE'" description="Show the component on all pages." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="fixedPosition"
    type="FixedPosition"
    description="Pins the component to a corner or edge of the browser window. Only takes effect when staticContainer is 'GLOBAL_PAGE'."
  >
    <ExpandableSection name="FixedPosition properties">
      <PropertyList>
        <Property name="vertical" type="string" description="Vertical pin. Supported values: 'TOP', 'CENTER', 'BOTTOM'." />
        <Property name="horizontal" type="string" description="Horizontal pin. Supported values: 'LEFT', 'CENTER', 'RIGHT'." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

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

```typescript
installation: {
  initialSize: {
    width: {
      sizingType: 'pixels',
      pixels: 400,
    },
    height: {
      sizingType: 'content',
    },
  },
}
```

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

```typescript
installation: {
  initialSize: {
    width: {
      sizingType: 'stretched',
    },
    height: {
      sizingType: 'content',
    },
  },
}
```

### Fully content-driven

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

```typescript
installation: {
  initialSize: {
    width: {
      sizingType: 'content',
    },
    height: {
      sizingType: 'content',
    },
  },
}
```

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

```typescript
installation: {
  initialSize: {
    width: {
      sizingType: 'pixels',
      pixels: 320,
    },
    height: {
      sizingType: 'pixels',
      pixels: 240,
    },
    preserveAspectRatio: true,
  },
}
```

### Different presets for desktop and mobile

```typescript
{
  installation: {
    initialSize: {
      width: { sizingType: 'pixels', pixels: 320 },
      height: { sizingType: 'pixels', pixels: 240 },
    },
    presets: {
      default: 'desktopCard',
      small: 'mobileCard',
    },
  },

  editorElement: {
    presets: {
      desktopCard: {
        displayName: 'Desktop Layout',
        presetCssUrl: './presets/desktop.css',
        initialSize: {
          width: { sizingType: 'pixels', pixels: 600 },
          height: { sizingType: 'pixels', pixels: 400 },
        },
      },
      mobileCard: {
        displayName: 'Mobile Layout',
        presetCssUrl: './presets/mobile.css',
        initialSize: {
          width: { sizingType: 'pixels', pixels: 300 },
          height: { sizingType: 'pixels', pixels: 200 },
        },
      },
    },
  },
}
```

### Pinned to a fixed position

A component that appears on every page, pinned to the bottom-right corner of the browser window:

```typescript
installation: {
  staticContainer: 'GLOBAL_PAGE',
  fixedPosition: {
    vertical: 'BOTTOM',
    horizontal: 'RIGHT',
  },
  initialSize: {
    width: { sizingType: 'pixels', pixels: 400 },
    height: { sizingType: 'pixels', pixels: 600 },
  },
}
```

## See also

- [Layout](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/layout.md)
- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)