{quote ?? '"This app transformed our workflow."'}
{image?.url && 
}
{authorName ?? 'Jordan Lee'}
{authorRole ?? 'Operations Manager'}
__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.Editor React Component extensions let you build custom site widgets in React that fully integrate with the editor. You describe your component's customizable parts in a declarative manifest, and the editor builds matching [auto panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/about-auto-panels.md) for Wix users. This gives Wix users the same editing experience they get with built-in Wix elements, without you having to build or maintain your own settings panels like you would with a custom element. To see auto panels appear one by one as you add manifest properties, follow the [step-by-step tutorial](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/tutorial-configure-auto-panels.md).
**Editor Compatibility** Editor React Component extensions are built for [Wix Harmony](https://dev.wix.com/docs/build-apps/get-started/overview/about-wix-harmony-and-apps.md), Wix's AI-powered editor. They're not supported on Wix Editor or Wix Studio sites, and there's no way to conditionally switch between extension types based on the editor.## How it works Your extension has 2 main parts: - **React component**: Your UI code that renders in the editor and on the live site. - **Manifest**: A configuration object that declares what's customizable about your component, so the editor knows which [auto panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/panels/about-auto-panels.md) and controls to show to Wix users. You build the React component first. The CLI then auto-generates the large part of the manifest for you. For more information, 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). Your component code may also include additional assets like stylesheets, and you can provide separate bundles for the live site and the editor. For more details, see [`resources`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/root-properties/resources.md). When a Wix user adds your component to their site: 1. The editor reads the manifest to understand what customizations are available. 2. The editor builds the matching auto panels and controls in the editor UI. 3. As the Wix user makes changes, the editor stores those values. It passes data changes to your component as [props](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/runtime-props.md) and applies style changes as CSS directly to the DOM elements that match the selectors in the manifest. TypeScript types for all props are available from the [`@wix/editor-react-types`](https://www.npmjs.com/package/@wix/editor-react-types) package. ```mermaid %%{ init: { 'theme': 'base', 'themeVariables': { 'primaryColor': '#ffffff', 'primaryTextColor': '#162D3D', 'primaryBorderColor': '#162D3D', 'lineColor': '#0C6EFC', 'secondaryColor': '#674FE6', 'tertiaryColor': '#F4F4F4', 'edgeLabelBackground': '#ffffff', 'labelTextColor': '#162D3D' } } }%% graph TD subgraph Development ["Your code"] direction LR A1[React component] --- A2[Manifest] end Development --> B([Wix user installs your app]) B --> WixEditor subgraph WixEditor ["Editor"] C[Editor reads manifest to build auto panels]--> D{User interaction} D -->|Data| E[Delivered as props] D -->|Style| F[Applied via CSS selectors] E --> G[Component rerenders] F --> G end %% Custom Wix-y Styling style Development fill:#F0EBFF,stroke:#674FE6,stroke-width:2px style WixEditor fill:#D5E6FF,stroke:#0C6EFC,stroke-width:2px style D fill:#FFF9E5,stroke:#FAAD4D style B fill:#E6F0FF,stroke:#0C6EFC ``` ## Example Here's a testimonial card built as an Editor React Component. The component code comes first, then the manifest that drives it. **React component:** ```tsx import type { Image } from '@wix/editor-react-types'; import './style.css'; interface TestimonialCardProps { className: string; quote?: string; authorName?: string; authorRole?: string; image?: Image; } export default function TestimonialCard({ className, quote, authorName, authorRole, image }: TestimonialCardProps) { return (
{quote ?? '"This app transformed our workflow."'}
{authorName ?? 'Jordan Lee'}
{authorRole ?? 'Operations Manager'}