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

## Article: Introduction (React Elements API)

## Article Link: https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md

## Article Content:

<!-- Source: packages/public-editor-platform-sdk/src/element/index.ts in wix-private/editor-platform -->
# About the React Elements API
<blockquote class="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 React Elements API lets you build custom panels for your Editor React Components. Unlike [auto panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/auto-panels/about-auto-panels.md), which the editor generates automatically from your manifest, custom panels give you full control over the panel's layout and controls. Your panel code calls the React Elements API to read and update the component it belongs to.

## Before you begin

Make sure you have the following set up:

- An [Editor React Component](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md)
- A [custom panel](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/build-a-custom-panel.md)

## Terminology

- **Auto panel:** A panel that the editor generates automatically from the data and style definitions in a component's manifest. No additional code required.
- **Custom panel:** A panel that you build yourself using the React Elements API. Gives you full control over the panel UI and behavior.

## Setup

@package_metadata:@wix/editor

To use the React Elements API, install the `@wix/editor` package and import `reactElements` in your panel code:

```js
import { reactElements } from '@wix/editor';
```

@sdk_package_setup

> **Notes:**
> - `@wix/editor` also exports a plural `elements` module. It's for a different extension type, [Editor Add-on Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/editor-extensions/about-editor-add-on-extensions.md), and reads elements selected on the canvas from an add-on's panel. It's unrelated to Editor React Components. Make sure you import `reactElements`, not `elements`, when building a custom panel for an Editor React Component.
> - If you've built a custom element site widget before, that extension type uses a different API, `setProp()`/`getProp()`, to update the component. Editor React Components use `reactElements.setData()`/`getData()` instead. The two aren't interchangeable.

## Picker arguments

The `select*` methods open native editor pickers, such as the media manager or the color picker. Most of these methods accept one of two types of arguments, depending on how directly the result maps to your manifest:

- **Manifest key:** Pass a manifest key, such as a `styleItemKey` or `dataItemKey`. The editor reads the current value from that field, opens the picker, and writes the result straight back to it, with no code from you beyond the call itself. Use this when the picker's result is exactly the value for one manifest field, with nothing else to compute, combine, or check.
- **Explicit options:** Pass an initial value and callbacks, such as `onChange` or `onApply`. The editor opens the picker but leaves saving to you: your panel receives the selection through the callbacks and applies it itself with [`setData()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/set-data.md) or [`setStyles()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/set-styles.md). Use this whenever you need to do something with the result before it's saved, such as validating it, deriving other values from it, updating more than one field, or showing it in your panel's own UI before it's applied.

Not every picker method supports both: [`selectSort()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-sort.md) and [`selectFilter()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-filter.md) only accept a manifest key, and [`selectTextTheme()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-text-theme.md) only accepts explicit options. Each method's reference page describes which of these it supports.

## Methods

The methods below are grouped by what part of the component they read or update. Each links to its own reference page with the full syntax, parameters, and an example.

### Data

Read and update the values defined 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) section.

- [`getDataDefinitions()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/get-data-definitions.md)
- [`getData()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/get-data.md)
- [`getResolvedData()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/get-resolved-data.md)
- [`setData()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/set-data.md)

### Styles

Read, update, and remove [`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) defined in your manifest.

- [`getStyleDefinitions()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/get-style-definitions.md)
- [`getStyles()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/get-styles.md)
- [`setStyles()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/set-styles.md)
- [`removeStyles()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/remove-styles.md)

### Presets

Read and apply the [`presets`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/presets.md) defined in your manifest.

- [`getPresetDefinitions()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/presets/get-preset-definitions.md)
- [`getAppliedPreset()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/presets/get-applied-preset.md)
- [`applyPreset()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/presets/apply-preset.md)

### States

Read and switch between the [`states`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md) defined in your manifest, such as hover or disabled. Switching a state previews it in the editor only. Unless a state maps to a native CSS `pseudoClass`, it has no effect on the live site.

- [`getStateDefinitions()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/states/get-state-definitions.md)
- [`getState()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/states/get-state.md)
- [`setState()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/states/set-state.md)

### Pickers

Open native editor pickers for media, links, colors, backgrounds, fonts, and text themes. See [Picker arguments](#picker-arguments) above for how these methods return a selection.

- [`selectMedia()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-media.md)
- [`selectLink()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-link.md)
- [`selectColor()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-color.md)
- [`selectBackground()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-background.md)
- [`selectFont()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font.md)
- [`selectFontFamily()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font-family.md)
- [`selectFontWeight()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font-weight.md)
- [`selectTextTheme()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-text-theme.md)
- [`selectSort()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-sort.md)
- [`selectFilter()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-filter.md)

### Array items

Manage the selected index in array data groups: `data` fields with [`dataType: 'arrayItems'`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/complex-types.md) in the manifest, letting a Wix user manage a repeated set of items, such as a list of slides or testimonials.

- [`getArrayItemsSelectedIndex()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/array-items/get-array-items-selected-index.md)
- [`setArrayItemsSelectedIndex()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/array-items/set-array-items-selected-index.md)
- [`resetArrayItemsSelectedIndex()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/array-items/reset-array-items-selected-index.md)

### Change events

Subscribe to changes on the component to keep your panel in sync when a Wix user makes changes outside your panel, or when the component has values that both an auto panel and your custom panel can edit.

- [`onChange()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/change-events/on-change.md)

### Component metadata

Read information about the component itself, such as its display name, the display groups declared in its manifest, and an identifier for reporting analytics events.

- [`getDisplayName()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/component-metadata/get-display-name.md)
- [`getDisplayGroupDefinitions()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/component-metadata/get-display-group-definitions.md)
- [`getBiToken()`](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/component-metadata/get-bi-token.md)

## See also

- [About Custom Panels for Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/about-custom-panels.md)
- [Build a Custom Panel](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/build-a-custom-panel.md)
- [Sync a Custom Panel with External Data](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/sync-a-custom-panel-with-external-data.md)
- [About Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/about-extensions.md)