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 React Elements API lets you build custom panels for your Editor React Components. Unlike auto panels, 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.
Make sure you have the following set up:
To use the React Elements API, install the @wix/editor package and import reactElements in your panel code:
Note: @wix/editor also exports a plural elements module. It's for a different extension type, Editor Add-on Extensions, 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.
Note: 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.
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:
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.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() or setStyles(). 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() and selectFilter() only accept a manifest key, and selectTextTheme() only accepts explicit options. Each method's reference page describes which of these it supports.
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.
Read and update the values defined in your manifest's data section.
Read, update, and remove cssProperties and cssCustomProperties defined in your manifest.
Read and apply the presets defined in your manifest.
Read and switch between the states 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.
Open native editor pickers for media, links, colors, backgrounds, fonts, and text themes. See Picker arguments above for how these methods return a selection.
selectMedia()selectLink()selectColor()selectBackground()selectFont()selectFontFamily()selectFontWeight()selectTextTheme()selectSort()selectFilter()Manage the selected index in array data groups: data fields with dataType: 'arrayItems' in the manifest, letting a Wix user manage a repeated set of items, such as a list of slides or testimonials.
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.
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.
Last updated: 8 September 2026