Editor Compatibility
Editor React Component extensions are built for Wix Harmony, 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.
When you add an Editor React Component extension to your CLI project, the CLI generates a component folder with the name you choose, containing the following files:
<component-name>.extension.ts file that defines the component's identity, installation, and resources, and combines them with the auto-generated editorElement.<component-name>.generated.ts file that holds the auto-generated editorElement portion of the manifest. This file is generated when you scaffold the component and whenever you explicitly regenerate the manifest using wix generate manifest.<component-name>.tsx file that contains the React code that defines your component.styles.module.css file with the component's default styles.Important: Before you start building, review the manifest validation rules and unsupported features.
The <component-name>.extension.ts file defines your component's identity, installation behavior, and code resources. It also imports the auto-generated editorElement from <component-name>.generated.ts and combines it with the rest of the configuration. This file is required, so don't delete it after the component is generated. If you add your own files, you must include <component-name>.extension.ts.
You own this file and edit it manually. The CLI doesn't overwrite it when you regenerate the manifest.
When you generate a new Editor React Component in your project, you'll see the following initial code in <component-name>.extension.ts. The generated code is a sample counter component. Replace the configuration with your own logic.
The generated configuration includes:
| Key | Type | Description |
|---|---|---|
id | string | Unique identifier for your component. |
description | string | Brief description of your component. |
type | string | A unique reference for your component, made up of your app's code identifier followed by a name you choose for the component. |
installation | object | Controls how the component is added to a page, including which page and its initial dimensions. |
editorElement | object | The auto-generated portion of the manifest, imported from <component-name>.generated.ts. Declares which parts of your component Wix users can edit and how the auto panels are configured. |
resources.client.componentUrl | string | Path to your React component file. |
This generated file provides a starting example with basic configuration. Editor React Components support options for data, styling, interactions, and editor behavior.
For comprehensive documentation on configuring your manifest, see About the Manifest and the Manifest Walkthrough.
The <component-name>.generated.ts file holds the auto-generated editorElement portion of your manifest. The CLI produces this file by reading your React component's JSX, CSS, and prop types.
As you iterate on your component, keeping the manifest in sync depends on how you work:
wix generate manifest.editorElement is the largest part of the manifest. It declares the data your component exposes, the inner elements that Wix users can select, the CSS properties they can customize, and any presets, states, or layout behavior. The editor reads these declarations to build the matching auto panels.
A generated file looks like this:
Caution: Don't edit <component-name>.generated.ts directly. Manual changes are overwritten the next time the manifest regenerates. To regenerate this file after manual changes to your component, run wix generate manifest.
The <component-name>.tsx file is where you write the React code that defines your component. You can write code in other files and include it here, but you must return your main component in this file. This is where the CLI will look for the component definition.
The CLI reads this file when regenerating <component-name>.generated.ts, so the structure of your JSX, CSS classes, and prop types directly shape the auto-generated editorElement. After you edit this file manually, run wix generate manifest to keep the generated manifest in sync.
This file is required for the component to work, so don't delete it. If you add the files on your own, you must include <component-name>.tsx.
When the <component-name>.tsx file is generated, it looks like this:
The file defines a React functional component with TypeScript. The component receives props that map directly to the data keys in the manifest's editorElement (auto-generated from this file), plus className and id which are always provided by the editor. For more details, see Runtime Props.
This is a standard React functional component, so you can use all React features including:
useState, useEffect, useCallback.The styles.module.css file contains the default styles for the generated component. It uses CSS Modules, which scope class names locally to avoid conflicts with other components on the page.