> 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: Add an Editor React Component Extension with the Wix CLI

## Article: Add an Editor React Component Extension with the Wix CLI

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/editor-react-components/add-an-editor-react-component-extension-with-the-wix-cli.md

## Article Content:

# Add an Editor React Component Extension with the Wix CLI

<blockquote class="caution">

**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.

</blockquote>

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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/about-site-extensions.md).

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

Follow the instructions below to:

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

<blockquote class="important">

**Important:** Before you start building, review the [manifest validation rules and unsupported features](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md).

</blockquote>

## Before you begin

Make sure you have:

- The [Wix CLI](https://dev.wix.com/docs/wix-cli.md) installed.
- A CLI [app project](https://dev.wix.com/docs/wix-cli/guides/get-started/project-structure.md) you can add a component to.
- The [Wix skill](https://dev.wix.com/docs/wix-cli/guides/development/about-wix-skills.md) installed in your project. New CLI projects include it by default. To add it to an existing project, use [`wix skills add`](https://dev.wix.com/docs/wix-cli/command-reference/global-commands/skills-add.md).

## Step 1 | Add a component to your app project

Scaffold an Editor React Component by prompting an AI coding agent with the [Wix skill](https://dev.wix.com/docs/wix-cli/guides/development/about-wix-skills.md) installed, or by running the CLI interactively. Both options produce the same file structure.

::::tabs
:::Let-AI-do-it

Paste the prompt below into your coding agent such as Claude Code, Codex, or Cursor, and replace `<your component description>` with a short description of what you want to build:

```text
/wix-app create editor react component - <your component description>
```

For example:

```text
/wix-app create editor react component - a designed contact card displaying my contact information: name, email, and mobile number.
```

:::
:::Do-it-yourself

In the terminal:

1. Navigate to your project repo.
2. Run the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) command.

    The CLI displays a menu of extensions to generate. Select **Editor React Component** and hit enter. 

3. The CLI then prompts you for the following items:

    + **Component name**: The display name for your component as it appears in the Wix editor.
    + **Component folder**: The name of the folder that contains the component code.

:::
::::

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

```bash
src/
  └── extensions/
      └── site/
          └── components/
              └── <your-component-name>/
                  ├── <your-component-name>.extension.ts
                  ├── <your-component-name>.generated.ts
                  ├── <your-component-name>.tsx
                  └── styles.module.css
```

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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/editor-react-components/editor-react-component-extension-files-and-code.md).

> **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](https://dev.wix.com/docs/wix-cli/guides/get-started/project-structure.md#your-custom-extension-folder).

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

::::tabs
:::Let-AI-do-it

When you prompt your AI coding agent to add or modify the component, the Wix skill regenerates the manifest as part of its workflow. No extra commands needed.

:::
:::Do-it-yourself

When you edit your component's React code, CSS, or prop types yourself, run the following commands after each round of changes:

```bash
wix build
wix generate manifest
```

[`wix build`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/build.md) compiles your latest component code, and [`wix generate manifest`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/app-only/generate-manifest.md) regenerates `<your-component-name>.generated.ts` from that output.

:::
::::

For details on what the generated file contains, see [Editor React Component Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/editor-react-components/editor-react-component-extension-files-and-code.md).

## Step 3 | Test your component

You can test your component while you're developing by running the [dev](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) 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.

<blockquote class="tip">

**Tip:** Access site environment data and interact with other Wix Apps, such as Wix Stores and Wix Bookings, using the [Site API](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md).

</blockquote>

## 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.

1. Run the [build](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/build.md) command.

2. Run the [release](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/release.md) command and follow the prompts to release an app version.

An app version allows you to publish an app to the [Wix App Market](https://www.wix.com/app-market) or install it on a site with a direct install URL. You can view [your app versions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fversions-app) in the app dashboard.

For more information about building and deploying your app, see [Build and Deploy an App with the Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/project-development/build-and-deploy-a-project-with-the-wix-cli.md).

## Delete the extension

To delete an Editor React Component extension from your app:

1. Delete the folder that contains the component's files.
2. Remove the import and `.use()` statements for the extension from the [`extensions.ts`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/about-the-extensions-ts-file.md) 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.

## See also

- [About Site Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/about-site-extensions.md)
- [About Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md)
- [Editor React Component Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/editor-react-components/editor-react-component-extension-files-and-code.md)
- [`wix generate manifest`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate-manifest.md)