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

## Article: Elements

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

## Article Content:

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


# Elements
<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 `elements` property lets you make inner parts of your component independently selectable and configurable in the editor. Each element gets its own selector, display name, and optional data, styling, states, and actions. When a Wix user clicks on that part of your component, they see controls specific to it rather than the whole component.

For example, a product card with a title, image, and buy button could define each part as a separate element. Clicking the button in the editor opens controls for just that button, such as its text, link, colors, and states, without affecting the rest of the card.

## Where to define

{/* TODO: when refElements are supported, add here */}
You can define `elements` 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) and in other `elements` of type `inlineElement`.

<blockquote className="important">

**Important:** Elements can nest multiple levels deep. When an element defines `data`, those values are passed to your component inside the `elementProps` object rather than as top-level props. Nested elements appear under their parent's `elementProps`. For more information, see [Props](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md).

</blockquote>

## Element item

Each entry in the `elements` map is an element item. It specifies the element's type and contains the corresponding configuration object.

<PropertyList bordered>
  <Property
    name="elementType"
    type="string"
    required
    description={<>The element type. Supported values: <a href="fallback::#inline-element">inlineElement</a> or <a href="fallback::#ref-element">refElement</a>. Only inlineElement is currently supported.</>}
  />
  <Property
    name="inlineElement"
    type={<a href="fallback::#inline-element">InlineElement</a>}
    description="Configuration for the element when elementType is 'inlineElement'."
  />
  <Property
    name="refElement"
    type={<a href="fallback::#ref-element">RefElement</a>}
    description="Configuration for the element when elementType is 'refElement'. Not yet supported."
  />
</PropertyList>

## Inline element

An inline element is a custom element you define from scratch with its complete configuration.

<PropertyList bordered>
  <Property
    name="selector"
    type="string"
    required
    description="CSS selector targeting the element in your component's DOM."
  />
  <Property
    name="displayName"
    type="string"
    required
    description="Name shown in the editor."
  />
  <Property
    name="data"
    type={<>map&lt;string, <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::5bf03571-5a86-4048-9875-076fc08ec990*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-overview">DataItem</a>&gt;</>}.md
    description="Data properties for this element, passed as props to your component."
  />
  <Property
    name="elements"
    type="map<string, ElementItem>"
    description="Nested child elements in this element."
  />
  <Property
    name="behaviors"
    type="Behaviors"
    description="Controls editor interactions."
  >
    <ExpandableSection name="Behaviors properties">
      <PropertyList>
        <Property
          name="selectable"
          type="boolean"
          description="Whether the element can be selected and configured independently in the editor. Must be set to `true` for the element to be selectable."
        />
        <Property
          name="removable"
          type="boolean"
          description="Whether Wix users can remove this element from the component."
        />
        <Property
          name="duplicatable"
          type="boolean"
          description="Whether the element can be duplicated by Wix users."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="actions"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::e46c6594-7bd0-43af-ac73-769916de459d*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions">Actions</a></>}.md
    description="Native platform actions available for this element."
  />
  <Property
    name="customActions"
    type={<>map&lt;string, <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::e46c6594-7bd0-43af-ac73-769916de459d#custom-actions*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions.md#custom-actions">CustomAction</a>&gt;</>}
    description="Developer-defined custom actions specific to your component."
  />
  <Property
    name="presets"
    type={<>map&lt;string, <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::f1223b17-2da7-4377-a5ab-f9d0faa827fd#preset-item-properties*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets/presets.md#preset-item-properties">PresetItem</a>&gt;</>}
    description="Predefined style or layout variations."
  />
  <Property
    name="archetype"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::e217b7ec-0a90-49c9-890a-3d450238c1f6*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/archetype">Archetype</a></>}.md
    description="Semantic classification hint for AI and editor features."
  />
  <Property
    name="states"
    type={<>map&lt;string, <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::c7e1ca18-6d99-4ca2-9cb2-002d9bdd58aa#state-item-properties*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md#state-item-properties">ElementState</a>&gt;</>}
    description="Define component states for preview and testing."
  />
  <Property
    name="visibleState"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::c7e1ca18-6d99-4ca2-9cb2-002d9bdd58aa#visible-state*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md#visible-state">VisibleState</a></>}
    description="Links element visibility to a component state for conditional display."
  />
  <Property
    name="displayFilters"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::53281439-0293-4e2e-9a14-e89e56c595c0*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-filters">DisplayFilters</a></>}.md
    description="Control visibility of properties in the editor panel."
  />
  <Property
    name="displayGroups"
    type="map<string, DisplayGroupItem>"
    description="Group related properties together in the editor panel for better UX."
  />
  <Property
    name="cssProperties"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties">CssPropertyItem</a>&gt;</>}.md
    description="Direct CSS properties applied to the element."
  />
  <Property
    name="cssCustomProperties"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties">CssCustomPropertyItem</a>&gt;</>}.md
    description="CSS custom properties declared with names prefixed by `--`, for reusable values referenced with `var()`."
  />
  <Property
    name="helpArticle"
    type="{ url: string }"
    description="Link to a help article for this element. Set `url` to the full URL of the help article."
  />
</PropertyList>

## Ref element

<blockquote className="caution">

**Caution:** Support for ref elements is under development. See [Unsupported features](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md#unsupported-features).

</blockquote>

A ref element references an existing Wix component and optionally overrides its properties.

<PropertyList bordered>
  <Property
    name="type"
    type="string"
    required
    description="The type identifier of the Wix component to reference."
  />
  <Property
    name="selector"
    type="string"
    required
    description="CSS selector for where this element appears in your DOM."
  />
  <Property
    name="displayName"
    type="string"
    description="Override the referenced component's display name in the editor."
  />
  <Property
    name="data"
    type="map<string, PropertyOverride>"
    description="Override how data properties are displayed or disable their editing."
  >
    <ExpandableSection name="PropertyOverride properties">
      <PropertyList>
        <Property name="disableEditing" type="boolean" description="When true, prevents Wix users from editing this property in the editor." />
        <Property name="displayName" type="string" description="Changes the label shown in the editor panel. Maximum 100 characters." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="behaviors"
    type="Behaviors"
    description="Override the referenced component's editor behaviors."
  />
  <Property
    name="actions"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::e46c6594-7bd0-43af-ac73-769916de459d*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions">Actions</a></>}.md
    description="Override or hide native actions from the referenced component."
  />
  <Property
    name="customActions"
    type={<>map&lt;string, <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::e46c6594-7bd0-43af-ac73-769916de459d#custom-actions*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions.md#custom-actions">CustomAction</a>&gt;</>}
    description="Override custom actions from the referenced component."
  />
  <Property
    name="visibleState"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::c7e1ca18-6d99-4ca2-9cb2-002d9bdd58aa#visible-state*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md#visible-state">VisibleState</a></>}
    description="Links element visibility to a component state for conditional display."
  />
  <Property
    name="displayFilters"
    type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::53281439-0293-4e2e-9a14-e89e56c595c0*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-filters">DisplayFilters</a></>}.md
    description="Control visibility of properties in the editor panel."
  />
  <Property
    name="cssProperties"
    type="map<string, PropertyOverride>"
    description="Override how CSS properties are displayed or disable their editing."
  />
  <Property
    name="cssCustomProperties"
    type="map<string, PropertyOverride>"
    description="Override how CSS custom properties are displayed or disable their editing."
  />
  <Property
    name="helpArticle"
    type="{ url: string }"
    description="Link to a help article for this element. Set `url` to the full URL of the help article."
  />
</PropertyList>

## Examples

### Progress bar with nested elements

A progress bar with CSS custom properties and non-selectable sub-elements.

```typescript
editorElement: {
  selector: '.progress-container',
  displayName: 'Progress Bar',
  data: {
    value: {
      dataType: 'number',
      displayName: 'Progress',
      defaultValue: 60,
    },
  },
  elements: {
    label: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.progress-label',
        displayName: 'Label',
        behaviors: {
          selectable: false,
          removable: true,
        },
        data: {
          text: {
            dataType: 'text',
            displayName: 'Label Text',
            defaultValue: 'Progress',
          },
        },
        cssProperties: {
          color: {
            displayName: 'Text Color',
          },
        },
      },
    },
    bar: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.progress-bar',
        displayName: 'Bar',
        behaviors: {
          selectable: false,
          removable: false,
        },
        cssCustomProperties: {
          barColor: {
            displayName: 'Bar Color',
            cssPropertyType: 'color',
            defaultValue: '#3899EC',
          },
          barBorderRadius: {
            displayName: 'Bar Corner Radius',
            cssPropertyType: 'number',
            defaultValue: '4px',
          },
        },
      },
    },
  },
}
```

### Removable element with display toggle

A button component with a removable icon element. Setting `removable: true` lets Wix users toggle the element on or off. The `display` CSS property with `displayValues` controls which display states are available when the element is visible.

```typescript
editorElement: {
  selector: '.button',
  displayName: 'Button',
  elements: {
    icon: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.button-icon',
        displayName: 'Icon',
        behaviors: {
          selectable: false,
          removable: true,
        },
        cssProperties: {
          display: {
            displayValues: ['none', 'inline-block'],
          },
        },
      },
    },
  },
}
```

## See also

- [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)