> 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: About Auto Panels ## Article: About Auto Panels for Editor React Components ## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/auto-panels/about-auto-panels.md ## Article Content: # About Auto Panels for Editor React Components
__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.
Auto panels are how Wix users customize your [Editor React Component](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md) in the editor. When a Wix user selects your component, Wix builds the panels automatically from the declarations in its manifest. You don't render any UI yourself. The CLI auto-generates most of those declarations in the [`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) portion of the manifest by reading your React component source. For details, see [auto-generated manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md#auto-generated-manifest). To see auto panels built up from scratch, see [Tutorial | Configure Auto Panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/tutorial-configure-auto-panels.md). ## How Wix users open auto panels When a Wix user selects your component in the editor, an action bar appears with buttons for the auto panels available on it. Each button opens a panel populated with the controls you declared. Auto panels are available for the root component and, if you define them, for [inner elements](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md). Inner elements can be selected independently, each with its own action bar and auto panels. > **Note:** Auto panels appear only in the editor, while a Wix user is editing the site. They aren't shown on the live site. ## Available auto panels and controls The following panels and controls appear in the editor for your component, depending on which manifest properties you define. - [Settings](#settings) - [Edit Text](#edit-text) - [Design](#design) - [Explore Designs](#explore-designs) - [Animation](#animation) - [Action bar buttons](#action-bar-buttons) - [Sizing behavior](#sizing-behavior) ### Settings The **Settings** panel exposes editable content for your component. Each entry in your manifest's [`data`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md) becomes a labeled control, with the `dataType` determining the control type. For example, text becomes a text input, images open the Wix Media Manager, and dates show a date picker. The values Wix users enter here are passed back to your component as React [props](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md) at runtime. ![The Settings panel for a testimonial card, with controls for an image data item](https://wixmp-833713b177cebf373f611808.wixmp.com/images/0de9a85121d8df161fa570b4dbba7423.png) ### Edit Text When your `data` includes one or more text-based items (`text`, `richText`, `textEnum`), an **Edit Text** panel is generated alongside **Settings**, exposing only the text inputs. This gives Wix users a focused way to update copy without scrolling through unrelated controls. ![The Edit Text panel with inputs for quote, author name, and author role](https://wixmp-833713b177cebf373f611808.wixmp.com/images/ff1a30b6a7d7af5981ff5006f6de9cf4.png) ### Design The **Design** panel exposes style controls. Each entry in [`cssProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md) and [`cssCustomProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties.md) you declare becomes the appropriate control: `backgroundColor` gets a color picker, `borderRadius` gets a corner radius slider, `boxShadow` gets a shadow editor, and so on. When a Wix user changes a value, the editor applies it as an inline style on the matching DOM element. Your component doesn't need to read or handle these values. ![The Design panel with color, spacing, corners, and shadow controls](https://wixmp-833713b177cebf373f611808.wixmp.com/images/868c0d3de03e7b08fecb20755c9775b3.png) If your manifest also defines [`states`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md), a state selector appears at the top of the **Design** panel so Wix users can style each state separately. ### Explore Designs If your manifest defines [`presets`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md), an **Explore Designs** panel appears. Each preset is a named visual variation with its own thumbnail, default values, and optional preset-scoped CSS. Switching between presets is a one-click change for Wix users. ![The Explore Designs panel with Card and Minimal preset variants](https://wixmp-833713b177cebf373f611808.wixmp.com/images/794cd89fcb40d5e52f00110c4195f1b4.png) ### Animation If your manifest defines [`interactions`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/interactions.md), an **Animation** panel appears with controls for declarative entrance effects, scroll triggers, and other interactions you opted into. ### Action bar buttons The action bar that opens your auto panels also hosts non-panel buttons, like duplicating the component or opening a Wix-managed picker. You can opt out of the defaults with [`actions`](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), and you can add your own buttons with [`customActions`](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) that open URLs or trigger custom behavior. ### Sizing behavior The editor reads [`layout`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/layout.md) to enable resize handles, content sizing, and stretch behavior in the editor, and [`installation.initialSize`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/root-properties/installation.md) to set the dimensions when the Wix user first drops the component on the page. ## Control what's in a panel You configure panel contents through manifest properties. The properties you define determine which controls appear and how they behave. - **Include or omit controls:** Only properties you declare in the manifest appear in a panel. For example, skip a `cssProperty` and that control doesn't show up. - **Set labels:** Use [`displayName`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) on data items, CSS properties, presets, and elements to control the text Wix users see. - **Set default values:** Use `defaultValue` so controls show the same value the Wix user sees in the editor. - **Constrain input:** Each data type accepts type-specific options that the editor enforces in the control. For example, `text.minLength`, `text.maxLength`, and `number.minimum`. ## Organize controls within a panel Use grouping and conditional visibility to keep each panel focused and easier to scan. - **Group related controls:** Use [`displayGroups`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-groups/display-groups.md) to organize properties into named sections inside a panel. - **Show controls conditionally:** Use [`displayFilters`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-filters.md) to hide controls based on the value of another data item, preset, or state. ## Customize inner elements and states You can expose advanced customization beyond the root component by configuring inner targets and state-based styling. - **Configure inner elements:** Each entry in [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) gets its own set of auto panels. Add `data`, `cssProperties`, `presets`, or `states` inside an element to customize its panels independently of the root. - **Expose state-specific styling:** Define [`states`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md) (like hover or disabled) for per-state styling. ## Manifest cheatsheet Use this as a quick lookup for which manifest property configures which part of the editor experience: | Manifest property | Where it surfaces | What it controls | |---|---|---| | [`data`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/about-data.md) | **Settings** panel, **Edit Text** panel, and other native controls based on the `dataType` | Editable content like text, numbers, images, links, dates, and toggles. Each entry becomes a control and a runtime prop. | | [`cssProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md) | **Design** panel | Standard CSS properties exposed as design controls (colors, spacing, corners, shadows, typography). Applied as inline styles. | | [`cssCustomProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties.md) | **Design** panel | CSS variables for cases the standard properties don't cover. Applied as inline custom property values. | | [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) | Independent action bar and auto panels on inner parts | Makes specific inner DOM elements selectable, each with its own data, CSS, presets, and states. | | [`presets`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md) | **Explore Designs** panel | Named visual variations with thumbnails, default values, and optional preset-scoped CSS. | | [`states`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md) | **State** selector in the **Design** panel | Conditions like hover or disabled, each stylable independently in the **Design** panel. | | [`interactions`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/interactions.md) | **Animation** panel | Declarative animation triggers and effect groups. | | [`actions`](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) | Action bar | Opt out of, override, or rename default action bar buttons. | | [`customActions`](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) | Action bar | Add your own buttons to the action bar that open URLs or trigger custom behavior. | | [`displayGroups`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-groups/display-groups.md) | Inside auto panels | Organize related controls into named sections. | | [`displayFilters`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/display-filters.md) | Inside auto panels | Show or hide controls based on the value of another data item, preset, or state. | | [`layout`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/layout.md) | Editor (resize handles and stretching) | Resize direction, content sizing, and stretch behavior. | | [`installation.initialSize`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/root-properties/installation.md) | Editor (on insert) | The size the component takes when a Wix user first adds it to the page. | ## See also - [Tutorial | Configure Auto Panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/tutorial-configure-auto-panels.md) - [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) - [Editor Element](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) - [Runtime Props Reference](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md)