In This Article

Add an Editor React Component Extension with the Wix CLI

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.

The Wix CLI makes it easy to add and develop Editor React Component extensions in your app project. For more general information about site extensions, see About Site Extensions.

The CLI creates the necessary files with template code so you can easily start developing a component.

Follow the instructions below to:

Add an Editor React Component extension to your app project.
Develop your component with an auto-generated manifest.
Test the component on a site.
Deploy your app with the component.

Important: Before you start building, review the manifest validation rules and unsupported features.

Before you begin

Make sure you have:

The Wix CLI installed.
A CLI app project you can add a component to.
The Wix skill installed in your project. New CLI projects include it by default. To add it to an existing project, use wix skills add.

Step 1 | Add a component to your app project

Scaffold an Editor React Component by prompting an AI coding agent with the Wix skill installed, or by running the CLI interactively. Both options produce the same file structure.

Both options create the extension files in your project directory with the following structure:

Copy

The <your-component-name>.generated.ts file holds the auto-generated editorElement portion of the manifest. The other manifest properties such as type, installation, and resources live in <your-component-name>.extension.ts, which imports the editorElement from the generated file. For a per-file walkthrough, see Editor React Component Extension Files and Code.

Note: This is the default folder structure created by the CLI. You can move these files to any location in the src/ folder and update the references in your extension.ts file. Learn more about the flexible file system.

Step 2 | Develop your component

As you iterate on the component, <your-component-name>.generated.ts needs to stay in sync with your React code. There are 2 ways this happens, depending on how you work:

For details on what the generated file contains, see Editor React Component Extension Files and Code.

Step 3 | Test your component

You can test your component while you're developing by running the dev command. Select the option in the CLI menu to view your component in the editor. This opens the test site editor, where you can view and try out your component.

Tip: Access site environment data and interact with other Wix Apps, such as Wix Stores and Wix Bookings, using the Site API.

Step 4 | Build and deploy your project

Once your app project is ready for production, you can build it and release a version in the app dashboard.

Run the build command.
Run the release command and follow the prompts to release an app version.

An app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL. You can view your app versions in the app dashboard.

For more information about building and deploying your app, see Build and Deploy an App with the Wix CLI.

Delete the extension

To delete an Editor React Component extension from your app:

Delete the folder that contains the component's files.
Remove the import and .use() statements for the extension from the extensions.ts file.

Note: If you've already created a version of your app, deleting the extension's files from your project doesn't remove it from your app's latest version in the app dashboard. To remove the component, create a new version after deleting the extension files.