> 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: Editor Element

## Article: Editor Element

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md

## Article Content:

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


# Editor Element
The `editorElement` object is the core of the manifest. It defines the component's root selector and display name, and declares everything that should be customizable from data and styling to layout, presets, and states.

Each property you define in `editorElement` automatically generates editor UI, so you don't need to build settings panels yourself. For a summary of what each property generates, see [About Auto Panels](https://dev.wix.com/docs/site-extensions/editor-react-components/about-auto-panels-for-editor-react-components.md).

## Where to define

You can only define `editorElement` at the root level of your manifest, alongside properties like `type` and `resources`.

## Editor element properties

The `editorElement` object supports the following properties:

<PropertyList bordered>
  <Property
    name="selector"
    type="string"
    required
    description={<>CSS class or selector on the root DOM element of your component, such as <code>.my-button</code>. The editor uses this to locate the component, apply CSS overrides from <code>cssProperties</code>, and set CSS variables from <code>cssCustomProperties</code>. Must match a class that appears in your component's rendered DOM, and should be namespaced to your component to avoid colliding with other components on the page. Minimum 4, maximum 50 characters. For the full rules, see <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/component-requirements.md#selectors">Selectors</a>.</>}
  />
  <Property
    name="displayName"
    type="string"
    required
    description="Name shown in the editor when the Wix user interacts with the component. Minimum 4 characters. Maximum 20 characters. Translatable."
  />
  <Property
    name="data"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview">DataItem</a>&gt;</>}.md
    description="Data properties for the component. Each key is a data item name and each value is a data item definition. Passed to the component as props at runtime."
  />
  <Property
    name="cssProperties"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/css/standard-css-properties">CssPropertyItem</a>&gt;</>}.md
    description="Standard CSS properties applied as overrides in the scope of the component. Each key is a CSS property name and each value is the property configuration."
  />
  <Property
    name="cssCustomProperties"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/css/css-custom-properties">CssCustomPropertyItem</a>&gt;</>}.md
    description="CSS custom properties (variables) applied in the scope of the component. Each key is the custom property name and each value is the property configuration."
  />
  <Property
    name="elements"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements">ElementItem</a>&gt;</>}.md
    description="Inner elements of the component with their own data, styling, and behaviors. Each key is a unique element identifier."
  />
  <Property
    name="actions"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/native-and-custom-actions">Actions</a></>}.md
    description="Override default editor actions for the component. Optional, and not recommended if you want the standard editor experience."
  />
  <Property
    name="customActions"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/native-and-custom-actions">CustomAction</a>&gt;</>}.md
    description="Developer-defined custom actions for the component. Each key is a unique action identifier. Use for custom behaviors or integration with external domains."
  />
  <Property
    name="presets"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets">PresetItem</a>&gt;</>}.md
    description="Named visual variations of the component, each with an optional CSS file. Complementary to the default CSS file in resources. Each key is a unique preset key."
  />
  <Property
    name="elementsDefaults"
    type="map<string, ElementDefaults>"
    description="Default values for presets, CSS properties, CSS custom properties, and data of inner elements. Required if you want design panels to show initial values for inner elements."
  />
  <Property
    name="layout"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/layout">Layout</a></>}.md
    description="Layout capabilities of the component, including resize behavior, content sizing, and positioning."
  />
  <Property
    name="states"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/states">StateItem</a>&gt;</>}.md
    description="Conditions like hover or disabled that change how the component looks based on user interactions."
  />
  <Property
    name="displayFilters"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters">DisplayFilters</a></>}.md
    description="Control which properties, elements, and actions appear in the editor panels. Applied first, before preset and state filters."
  />
  <Property
    name="archetype"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/archetype">Archetype</a></>}.md
    description="Semantic classification of the component for AI tools and editor behaviors."
  />
  <Property
    name="interactions"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/interactions">Interactions</a></>}.md
    description="Triggers and effect groups for declarative animations that Wix users can configure."
  />
  <Property
    name="displayGroups"
    type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups">DisplayGroupItem</a>&gt;</>}.md
    description="Group related properties together in the editor for better organization. Each key is a unique display group identifier."
  />
</PropertyList>

## Examples

### Button with data, CSS properties, and presets

The following defines a button component with editable text, a style variant dropdown, a link, and a disabled toggle. It exposes background color, text color, and padding as design controls, a custom border radius variable, horizontal-only resizing, two visual presets, and a custom action that opens a panel.

```typescript
editorElement: {
  selector: '.custom-button',
  displayName: 'Custom Button',
  archetype: 'Button',
  data: {
    text: {
      dataType: 'text',
      displayName: 'Button Text',
      defaultValue: 'Click me',
      text: {
        minLength: 1,
        maxLength: 50,
      },
    },
    variant: {
      dataType: 'textEnum',
      displayName: 'Button Animation Style',
      defaultValue: 'primary',
      textEnum: {
        options: [
          { value: 'primary', displayName: 'Primary' },
          { value: 'secondary', displayName: 'Secondary' },
          { value: 'outline', displayName: 'Outline' },
        ],
      },
    },
    disabled: {
      dataType: 'booleanValue',
      displayName: 'Disabled',
      defaultValue: 'false',
    },
    link: {
      dataType: 'link',
      displayName: 'Button Link',
      link: {
        linkTypes: ['externalLink'],
      },
    },
  },
  cssProperties: {
    backgroundColor: {
      displayName: 'Background Color',
      defaultValue: '#007bff',
    },
    color: {
      displayName: 'Text Color',
      defaultValue: '#ffffff',
    },
    padding: {
      displayName: 'Padding',
      defaultValue: '12px 24px',
    },
  },
  cssCustomProperties: {
    borderRadius: {
      cssPropertyType: 'number',
      displayName: 'Border Radius',
      defaultValue: 4,
      number: {
        minimum: 0,
        maximum: 50,
      },
    },
  },
  layout: {
    resizeDirection: 'horizontal',
    contentResizeDirection: 'none',
  },
  presets: {
    cta: {
      displayName: 'Call to Action',
      description: 'Large prominent button for primary actions',
      cssFile: 'https://somecdn.com/my-button-assets/button-cta.css',
    },
    minimal: {
      displayName: 'Minimal',
      description: 'Clean minimal button style',
      cssFile: 'https://somecdn.com/my-button-assets/button-minimal.css',
    },
  },
  customActions: {
    openModal: {
      displayName: 'Open Modal',
      description: 'Opens a custom modal dialog',
      execution: {
        actionType: 'panel',
        panel: {
          panelType: 'panelId',
          panelId: 'a1b2c3d4-e5f6-4a5b-8c7d-9e0f1a2b3c4d',
        },
      },
    },
  },
}
```

### Card with display groups

The following defines a card component that uses `displayGroups` to organize its properties into logical sections in the editor panels. Border-related CSS properties are grouped together, CSS custom properties for visual effects are grouped separately, and data items for content are in their own group.

```typescript
editorElement: {
  selector: '.advanced-card',
  displayName: 'Advanced Card',
  cssProperties: {
    backgroundColor: {
      displayName: 'Background Color',
      defaultValue: '#ffffff',
    },
    borderWidth: {
      displayName: 'Border Width',
      defaultValue: '1px',
    },
    borderStyle: {
      displayName: 'Border Style',
      defaultValue: 'solid',
    },
    borderColor: {
      displayName: 'Border Color',
      defaultValue: '#e0e0e0',
    },
  },
  cssCustomProperties: {
    shadowIntensity: {
      cssPropertyType: 'number',
      displayName: 'Shadow Intensity',
      defaultValue: 0.1,
    },
    animationSpeed: {
      cssPropertyType: 'number',
      displayName: 'Animation Speed',
      defaultValue: 0.3,
    },
  },
  data: {
    title: {
      dataType: 'text',
      displayName: 'Card Title',
    },
    subtitle: {
      dataType: 'text',
      displayName: 'Card Subtitle',
    },
  },
  displayGroups: {
    borderSettings: {
      displayName: 'Border Settings',
      groupType: 'border',
      border: {
        width: 'borderWidth',
        style: 'borderStyle',
        color: 'borderColor',
      },
    },
    visualEffects: {
      displayName: 'Visual Effects',
      groupType: 'cssDataType',
      cssDataType: {
        items: ['shadowIntensity', 'animationSpeed'],
      },
    },
    contentData: {
      displayName: 'Content',
      groupType: 'dataType',
      dataType: {
        items: ['title', 'subtitle'],
      },
    },
  },
}
```

## See also

- [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)
- [About Editor React Components](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components.md)