> 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 in Studio Two

## Article: Add an Editor React Component Extension in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/add-an-editor-react-component-extension-in-studio-two.md

## Article Content:

# Add an Editor React Component Extension in Studio Two

An [Editor React Component (ERC)](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md) is a React component that Wix users place on pages and customize in the Studio Two editor.

Follow the instructions below to:

1. Add an ERC to your site project.
2. Customize the component.
3. Check the component on your site.
4. Publish your site with the component.

> **Note:** You can also ask **Aria**, Wix's AI assistant, to create and customize the extension.

## Step 1 | Add an ERC

To add an ERC:

1. In the Studio Two editor, open the **Code** tab.
2. Open the ERC form:
   - If the **Code** tab opens on a welcome screen, select the option to add a custom component.
   - Otherwise, open the **Wix Extension Builder** in the VS Code sidebar. Under **Create an Extension**, select **Site > Editor React Component**.

     ![the Wix Extension Builder in the VS Code activity bar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bff2816a5bfe47ed855a1859cd89d5a.png)

3. Fill in the form:
   - **Name**: The component's display name in the editor. It can be up to 30 characters. The Wix Extension Builder derives the folder and file names from it. For example, `Testimonial Card` becomes `testimonial-card`.
   - **Component description**: A short, required description of what the component does.
4. Click **Generate**.

You can find the new files under `src/extensions/site/components/<component-folder>/`. The extension is registered in your project's `extensions.ts` and listed under **My Extensions**. For what each file is for, see [Editor React Component Extension Files and Code](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-component-extension-files-and-code.md).

## Step 2 | Customize your ERC

You can edit the generated files to match the look and behavior you need. Change the code yourself, or ask the AI in the **Code** tab to help. When you're happy with the component, move on to the next step.

To save a file, press `Control+S` (or `Command+S` on macOS). A circle on a file's tab means the file has unsaved edits. When the status bar shows Synced, the editor has your saved changes.

For example, to update the default title:

1. Open `<component-folder>.props.ts`.
2. In `defaultProps`, change `title` from `'Title'` to `'Hello world!'`.
3. Save the file.

When you add the component to a page on the **Design** canvas, its title reads "Hello world!". A new default applies only to copies you add after saving. A copy that's already on a page keeps the title it was added with, so to see the change there, delete that copy and add the component again.

Changing a default value is all this example needs. Bigger changes take extra steps. After you change the component's props, elements, or CSS, regenerate the manifest. After you rename or replace props, also update `component.preview.tsx`. For the full workflow, from writing the component to adding presets and states, see [Build an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md).

## Step 3 | Check the component

To check the component:

1. Switch to the **Design** tab.
2. Navigate to **Add Elements > AI Generated**.
3. Select your component to place it on the page. If it isn't listed, ask **Aria**, Wix's AI assistant, to place it for you. For how to work with Aria, see [Working with Aria](https://support.wix.com/en/article/wix-studio-20-working-with-aria).
4. (Optional) Click **Preview** to view the page outside edit mode.

## Step 4 | Publish your site

When you're ready, click **Publish** in the Studio Two editor. Your ERC ships with the published site.

## See also

- [About Editor React Components](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md)
- [Build an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md)
- [Editor React Component Extension Files and Code](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-component-extension-files-and-code.md)
- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)
- [About Studio Two Extensions](https://dev.wix.com/docs/studio-two/get-started/about-studio-two-extensions.md)