Add Self-Hosted Editor Add-on Extensions

An editor add-on extension adds functionality to the Wix editors, providing site owners with new capabilities through a dedicated panel. This panel enables users to access and interact with the features of the add-on, seamlessly integrating them into their site-building experience.

To create an add-on extension, you need to do the following:

• Code and deploy the add-on’s panel.

• In the app dashboard, set up the add-on extension.

Step 1 | Code the add-on’s panel

The add-on panel is rendered as an iframe, which you can build using any tools you like. When it comes to designing the UI, consider using the Wix Design System. It is a collection of reusable React components that you can use to make your panel appear and feel like a native Wix panel.

In the panel’s code, use Wix's JavaScript SDK to interact with the Wix editor and access elements on the canvas (the page the user is designing), as well as access and manage site data.

You can use the Elements API to read and modify properties of certain types of editor elements.

Step 2 | Set up an add-on extension in your app dashboard

To make your add-on available for installation on sites, set up an add-on extension in your app dashboard and configure its basic settings and market listing. Your add-on's market listing determines how it will appear to users in the add-on explorer in the editors, including the add-on's name, icon, and teaser.

Note: The add-on's market listing is different from the app's market listing, which determines how the entire app appears in the Wix App Market.

1. In your Wix Studio workspace, select Custom Apps, and then create a new app.

2. In the left menu, select Extensions.

3. Click Create Extension and find the Editor Add-on extension.

4. Click Create.

5. Configure your add-on’s basic data:

   • Add-on name: The add-on name that is displayed to users.

   • Panel URL: The URL where your panel’s HTML code is deployed. You can use localhost during development, as long as it's configured to use HTTPS.

   • Panel width: The width of the add-on panel, which can be one of the following:

     • Small: 288 px wide (recommended). Matches most native editor panels.

     • Medium: 404 px wide. For wider content, like panels with tabs.

     • Large: 660 px wide. For displaying larger content, like thumbnails.

   • Panel height: The height of the add-on panel. Can be between 200 and 500 px.

6. Configure your add-on's market listing:

   • Teaser: A short promotional description for your add-on's market listing.

   • Icon: An icon for your add-on's market listing. Upload a square JPG or PNG file.

7. Click Save.

Your add-on extension is now available for installation on a site.

Step 3 | Test your add-on in the editor

To test your add-on, install it on a site:

1. In your app's dashboard, click Test Your App, and then click Editor.

2. Select the site on which you want to install the app, and click Add to Site.

3. When prompted for consent, click Agree & Add.
   Your app is now installed on a site and your add-on is available in the editor.

4. From the Tools menu, select Editor Add-ons, and then select your add-on.
   Your add-on’s panel is displayed.

5. Test your add-on, making sure that it functions as expected.

Step 4 | Submit and publish your add-on

When you’ve finished building and testing your add-on, you’re ready to launch and monetize your app.

Learn more about submitting your app for review.

See also

Tutorial | Create an Editor Add-on that Imports Icons from a Library