> 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 Self-hosted Editor Add-On Extensions
## Article: Add Self-hosted Editor Add-On Extensions
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/editor-extensions/add-self-hosted-editor-add-on-extensions.md
## Article Content:
# Add Self-Hosted Editor Add-on Extensions
An [editor add-on extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/editor-extensions/about-editor-add-on-extensions.md) 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.
**Important:** Review our [UX guidelines for add-ons](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/editor-extensions/ux-guidelines-for-editor-add-ons.md) before you start developing.
To create an add-on extension, you need to do the following:
* Code and deploy the add-on’s panel.
* In the [app dashboard](https://manage.wix.com/account/custom-apps), 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](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md). 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](https://dev.wix.com/docs/sdk.md) 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](https://dev.wix.com/docs/sdk/host-modules/editor/elements/introduction.md) to read and modify properties of certain types of [editor elements](https://support.wix.com/en/article/wix-editor-elements-available-in-the-editor).
## 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](https://manage.wix.com/account/custom-apps) 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](https://dev.wix.com/docs/build-apps/launch-your-app/market-listing/about-market-listings.md), which determines how the entire app appears in the [Wix App Market](https://www.wix.com/app-market).
1. In your Wix Studio workspace, select [Custom Apps](https://manage.wix.com/account/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**.
**Important:** Your app may also need additional setup in the app dashboard for authentication, permissions, and more. [Learn more about setting up your app in the app dashboard](https://dev.wix.com/docs/build-apps/develop-your-app/app-dashboard-setup/about-the-app-dashboard.md).
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 the top right corner of your [app's dashboard](https://manage.wix.com/account/custom-apps), click **Test App** and select **Test on dev site**.
1. Select an existing development site or click **+ Create Dev Site** to create a new site. Select the editor and the Wix Business Solution you want to use and click **Create Dev Site**.
1. Click **Test App**. Wix installs your app and opens the site in a new tab. You can set which site page opens in your [app settings](https://dev.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fapp-settings). If you don't set a page, the site editor opens by default.
1. From the **Tools** menu, select **Editor Add-ons**, and then select your add-on.
Your add-on’s panel is displayed.
1. Test your add-on, making sure that it functions as expected.
**Important:** Test your add-on on both Wix Editor and Wix Studio.
## 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](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/about-app-distribution.md).
## See also
[Tutorial | Create an Editor Add-on that Imports Icons from a Library](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-an-editor-add-on-that-imports-icons-from-a-library.md)