> 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: Editor React Component Extension Files and Code

## Article: Editor React Component Extension Files and Code

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

## Article Content:

# Editor React Component Extension Files and Code

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

When you [add an Editor React Component extension](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) to your CLI project, the CLI generates a component folder with the name you choose, containing the following files:

- A `<component-name>.extension.ts` file that defines the component's identity, installation, and resources, and combines them with the auto-generated `editorElement`.
- A `<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`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/app-only/generate-manifest.md).
- A `<component-name>.tsx` file that contains the React code that defines your component.
- A `styles.module.css` file with the component's default styles.

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

## component-name.extension.ts

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.

```typescript
import { extensions } from '@wix/astro/builders';
import { editorElement } from './my-editor-react.generated';

export default extensions.editorReactComponent({
  id: '162e8174-d5ab-475e-9ff2-6284a218e334',
  description: 'My Editor React',
  type: 'my_custom_app_harmony.Myeditorreact',
  installation: {
    staticContainer: 'HOMEPAGE',
    initialSize: {
      width: { sizingType: 'pixels', pixels: 350 },
      height: { sizingType: 'pixels', pixels: 250 },
    },
  },
  editorElement,
  resources: {
    client: {
      componentUrl: './extensions/site/widgets/my-editor-react/my-editor-react.tsx',
    },
  },
});
```

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](https://dev.wix.com/docs/build-apps/develop-your-app/app-dashboard/about-the-code-identifier.md) 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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-auto-panels.md) 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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md) and the [Manifest Walkthrough](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-walkthrough.md).

## component-name.generated.ts

The `<component-name>.generated.ts` file holds the auto-generated [`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) 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:

- **Manual edits**: The manifest doesn't stay in sync automatically while you edit files yourself. Regenerate it by running [`wix generate manifest`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate-manifest.md).
- **AI edits with the Wix skill**: Manifest regeneration happens as part of the Editor React Component [Wix skill](https://dev.wix.com/docs/wix-cli/command-reference/global-commands/skills-add.md) workflow.

[`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) 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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-auto-panels.md).

A generated file looks like this:

```typescript
import type { EditorElement } from '@wix/react-component-schema';

export const editorElement = {
  selector: '.my-editor-react',
  displayName: 'My Editor React',
  data: {
    label: { dataType: 'text', displayName: 'Label' },
    step: { dataType: 'number', displayName: 'Step' },
  },
  // ...elements, cssProperties, presets, states, layout
} as EditorElement;
```

<blockquote class="caution">

**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`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate-manifest.md).

</blockquote>

## component-name.tsx

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`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate-manifest.md) 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:

```typescript
import { useCallback, useState } from 'react';
import type { FC } from 'react';
import s from './styles.module.css';

interface Props {
  id: string;
  className: string;
  label?: string;
  showLabel?: boolean;
  step?: number;
}

const Button: FC<Props> = ({
  id,
  className,
  label = 'Counter',
  showLabel = true,
  step = 1,
}) => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback(() => {
    setCounter((prev) => prev + step);
  }, [step]);

  const decrementCounter = useCallback(() => {
    setCounter((prev) => prev - step);
  }, [step]);

  return (
    <div className={`my-editor-react ${className} ${s.root}`} id={id}>
      <div className={s.surface} role="group" aria-label={label}>
        {showLabel ? <span className={s.kicker}>{label}</span> : null}
        <div className={s.row}>
          <button
            type="button"
            className={`${s.btn} ${s.dec}`}
            onClick={decrementCounter}
            aria-label="Decrease"
          >
            <span className={s.btnGlyph}>−</span>
          </button>
          <span className={s.value}>{counter}</span>
          <button
            type="button"
            className={`${s.btn} ${s.inc}`}
            onClick={incrementCounter}
            aria-label="Increase"
          >
            <span className={s.btnGlyph}>+</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Button;
```

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

This is a standard React functional component, so you can use all React features including:

- React hooks like `useState`, `useEffect`, `useCallback`.
- Additional props as needed for your functionality.
- Child components and composition.
- External libraries and SDKs.

## styles.module.css

The `styles.module.css` file contains the default styles for the generated component. It uses [CSS Modules](https://github.com/css-modules/css-modules), which scope class names locally to avoid conflicts with other components on the page.

## See also

- [`wix generate manifest`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate-manifest.md)
- [Manifest Validation 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)
- [Add an Editor React Component Extension with the Wix CLI](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)
- [About Site Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/about-site-extensions.md)
- [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)
- [Tutorial | Build a Manifest Step by Step](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-walkthrough.md)
- [Runtime Props](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/props.md)
- [About Wix Skills for the CLI](https://dev.wix.com/docs/wix-cli/guides/development/about-wix-skills.md)