Add an Editor React Component Extension in Studio Two

An Editor React Component (ERC) 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

  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.

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.

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

Last updated: 2 November 2026

Did this help?