Add an Editor React Component Extension with the Wix CLI

Important: Editor React Components are:

  • Available on Wix Harmony
  • Not available on Wix Studio
  • Not available for publish on the Wix App Market

CLI Documentation Notice

You're viewing documentation for the new Wix CLI, which we recommend for all new projects. Determine which CLI your project uses.

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

The CLI creates the necessary files with template code so you can easily start developing your site widget.

Follow the instructions below to:

  1. Add an Editor React Component site widget to your app project.
  2. Test the site widget on a site.
  3. Deploy your app with the site widget.

Step 1 | Add a site widget to your app project

In the terminal:

  1. Navigate to your project repo.

  2. Run the generate command.

    The CLI will display a menu of extensions to generate. Select Site Widget and hit enter.

  3. When prompted, choose React Component as your framework.

    The CLI will then prompt 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.

Upon completion, the extension files will be created in your project directory with the following structure:

Copy

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

Learn more about the React Component site widget extension files.

Step 2 | Testing your site widget

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

Why do I get a placeholder when previewing my site widget?

In some cases, your site widget doesn't display when previewed, but does display as expected when viewed on a published site. We are currently working to fix this issue, but in the meantime, we display a placeholder.

This can happen if:

  • You open the dashboard, site, or editor from the menu options. Run the dev command to restart your local environment.
  • You preview a site when the site was opened with the editor menu option. Run the build command and then the release command to release a new version.

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

Step 3 | 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 command.

  2. 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 a site widget extension

To delete an existing site widget extension from your app:

  1. Delete the folder that contains your site widget's files.
  2. 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 a site widget's files from your project doesn't remove the site widget from your app's latest version in the app dashboard. To remove the site widget, create a new version after deleting the site widget extension files.

See also

Did this help?