> 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/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md
## Article Content:
import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";
# Editor Element
__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 `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/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/about-auto-panels.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:
map<string, DataItem>}.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."
/>
map<string, CssPropertyItem>}.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."
/>
map<string, CssCustomPropertyItem>}.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."
/>
map<string, ElementItem>}.md
description="Inner elements of the component with their own data, styling, and behaviors. Each key is a unique element identifier."
/>
Actions}.md
description="Override default editor actions for the component. Optional, and not recommended if you want the standard editor experience."
/>
map<string, CustomAction>}.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."
/>
map<string, PresetItem>}.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."
/>
Layout}.md
description="Layout capabilities of the component, including resize behavior, content sizing, and positioning."
/>
map<string, StateItem>}.md
description="Conditions like hover or disabled that change how the component looks based on user interactions."
/>
DisplayFilters}.md
description="Control which properties, elements, and actions appear in the editor panels. Applied first, before preset and state filters."
/>
Archetype}.md
description="Semantic classification of the component for AI tools and editor behaviors."
/>
Interactions}.md
description="Triggers and effect groups for declarative animations that Wix users can configure."
/>
map<string, DisplayGroupItem>}.md
description="Group related properties together in the editor for better organization. Each key is a unique display group identifier."
/>
## 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 Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)
- [About Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md)