> 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: UX Guidelines for Editor Add-Ons

## Article: UX Guidelines for Editor Add-Ons

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/editor-extensions/ux-guidelines-for-editor-add-ons.md

## Article Content:

# UX Guidelines for Editor Add-Ons

When designing your add-on panel's UI, ensure it is intuitive and user-friendly. Consider using the [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md) to maintain a cohesive design.

Use components such as:

* [`SidePanel`](https://www.wix-pages.com/wix-design-system/?path=/story/components-overlays--sidepanel#Settings_panel) to create a structured layout.
* [`FormField`](https://www.wix-pages.com/wix-design-system/?path=/story/components-form--formfield) and input components to collect user input effectively.

These tools help you design a panel that aligns with the overall Wix editor experience.

## Panel dimensions

When [setting up your add-on extension](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), you'll need to define its dimensions. Choose the appropriate dimensions for your panel based on your add-on’s content and use case.

Here are the recommended width options for your panel:

* **Small**: 288 px wide (recommended). This matches the size of most native editor panels.
* **Medium**: 404 px wide.  Ideal for panels with additional features, such as tabs.
* **Large**: 660 px wide. Best for larger content, like thumbnails.

The height of the panel can be set between 200 and 500 px, depending on your needs.

![ux-guidelines](https://wixmp-833713b177cebf373f611808.wixmp.com/images/8c15464c00ad43e3faad58f84b534ed9.png)