> 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: Build a Custom Panel

## Article: Build a Custom Panel

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/build-a-custom-panel.md

## Article Content:

# Build a Custom Panel for Your Editor React Component

Build a custom panel to control exactly how Wix users can configure your [Editor React Component](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md) in the editor.

By default, the editor generates [auto panels](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/auto-panels/about-auto-panels.md) from your manifest's data and style definitions, and they cover most components well. Build a custom panel instead when you need:

- A specific panel layout or custom UI controls
- Logic an auto panel can't provide, for example combining several manifest fields into one control, validating a value before saving it, or previewing a change before it's applied

Connecting your panel through a non-reserved custom action, as this guide does, adds it as a new button in the action bar alongside the auto panels, so a Wix user gets both.

In this article, you'll:

1. Create a custom panel component.
2. Register it as a separate [extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/about-extensions.md) and add it to your app.
3. Connect it to your component manifest through a [custom action](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions.md), a button in the editor toolbar that opens your panel instead of the auto-generated one.

## Before you begin

Make sure you have the following set up:

- A [Wix CLI app project](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/get-started/quick-start-a-wix-cli-app.md)
- An [Editor React Component site extension](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/supported-extensions/site/editor-react-components/add-an-editor-react-component-extension-with-the-wix-cli.md)

## Step 1 | Create the panel component

Create a React component that serves as your custom panel.

To create the panel component:

1. In the extension folder for your Editor React Component, create a new file for your panel. For example, `panel.tsx`.
2. Import `reactElements` from `@wix/editor`. This gives you access to the [React Elements API](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md).
3. Build your custom panel UI using React. Use `reactElements` methods to interact with the Editor React Component from your custom panel:
   - Call `reactElements.getData()` and `reactElements.getStyles()` to read the component's current values and initialize your custom panel UI.
   - Call methods like `reactElements.setData()`, `reactElements.setStyles()`, or `reactElements.applyPreset()` to apply changes when a user interacts with your custom panel.
   - Use `reactElements.onChange()` to subscribe to changes and keep your custom panel in sync.

   For example, `reactElements.getAppliedPreset()` returns the currently applied preset, and `reactElements.applyPreset()` applies a new one.

    ```tsx
    import { reactElements } from '@wix/editor';
    import React, { useEffect, useState } from 'react';

    const presetKeys = ['horizontal', 'vertical'];

    export default () => {
      const [selectedId, setSelectedId] = useState<string>(presetKeys[0]);

      useEffect(() => {
        reactElements.getAppliedPreset().then(preset => {
          if (preset && presetKeys.includes(preset)) {
            setSelectedId(preset);
          }
        });
      }, []);

      const applyPreset = (id: string) => {
        setSelectedId(id);
        reactElements.applyPreset({ key: id });
      };

      return (
        <div style={{ padding: '16px' }}>
          <h3>Layout</h3>
          <select value={selectedId} onChange={e => applyPreset(e.target.value)}>
            {presetKeys.map(id => (
              <option key={id} value={id}>{id}</option>
            ))}
          </select>
        </div>
      );
    };
    ```

## Step 2 | Register the panel extension

Register your panel component as an Editor React Component panel extension and add it to your app so it's included in the build.

To register the panel extension:

1. In the extension folder for your Editor React Component, create a file for the panel extension. For example, `panel.extension.ts`.
2. Export [`extensions.editorReactComponentPanel()`](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/supported-extensions/site/editor-react-components/editor-react-component-extension-files-and-code.md) to register the panel with the following properties:

    - `id`: A UUID that uniquely identifies your panel. Generate a UUID.
    - `displayName`: A name for the panel extension.
    - `contentType`: Set to `'code'` to register a panel built from a React component.
    - `code.bundleUrl`: The bundle URL for your panel's React component file. Import it from the component file's path with a `?url` suffix so your build tool resolves it to a URL.
    - `size`: The dimensions of the panel in the editor.
      - `height`: The panel height in pixels, as a number. Required. Minimum 150. A CSS value such as `'100vh'` isn't valid here.
      - `width`: The panel width. Accepted values are `'SMALL'`, `'MEDIUM'`, and `'LARGE'`.

    ```ts
    import { extensions } from '@wix/astro/builders';
    import panelUrl from './panel.tsx?url';

    export default extensions.editorReactComponentPanel({
      id: '<your-panel-id>',
      displayName: 'My Custom Panel',
      contentType: 'code',
      code: {
        bundleUrl: panelUrl,
      },
      size: {
        height: 400,
        width: 'LARGE',
      },
    });
    ```

To add the panel to your app:

1. Open the `extensions.ts` file for your app.
2. Import the panel extension and add it using `.use()`.

    ```ts
    import { app, extensions } from '@wix/astro/builders';

    import myWidget from './extensions/site/widgets/<your-widget>/<your-widget>.extension.ts';
    import myWidgetPanel from './extensions/site/widgets/<your-widget>/panel.extension.ts';

    export default app()
      .use(myWidget)
      .use(myWidgetPanel);
    ```

## Step 3 | Connect the panel to your component

Add a custom action in the component manifest that connects your panel to the component.

To connect the panel:

1. Open the extension file for your Editor React Component. This is the file where you call `extensions.editorReactComponent()`.
2. Inside the `editorElement` object, add a `customActions` property. Set the `actionType` to `'panel'` to tell the editor this action opens a panel, then reference your panel's `id` in the `panelId` field.

    > **Note:** Choose a key for your custom action that isn't one of the reserved native action keys (`settings`, `design`, `media`, `manageItems`, `dashboard`). Reusing one of those keys overrides that native action's slot, so your panel doesn't open when a Wix user clicks it. For the full list, see [Native and Custom Actions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/native-and-custom-actions.md).

    ```ts
    editorElement: {
      presets: {
        horizontal: {
          displayName: 'Horizontal',
          presetDefaults: {
            layout: {
                resizeDirection: 'horizontal',
                contentResizeDirection: 'vertical',
                disableStretching: false,
                disablePositioning: false,
                },
            },
          },
        },
        vertical: {
          displayName: 'Vertical',
          presetDefaults: {
            cssProperties: {
              flexDirection: { defaultValue: 'column' },
            },
          },
        },
      },
      customActions: {
        myCustomPanel: {
          displayName: 'My Custom Panel',
          execution: {
            actionType: 'panel',
            panel: {
              panelType: 'panelId',
              panelId: '<your-panel-id>',
            },
          },
        },
      },
    },
    ```

    The `displayName` value appears as a button in the action bar, the toolbar that appears when a Wix user selects your Editor React Component in the editor, and as the title at the top of the panel when it opens.

![The custom panel open in the editor](https://wixmp-833713b177cebf373f611808.wixmp.com/images/d83bce93841de4282573a24ae8d502c0.png)

## See also

- [About Custom Panels for Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/about-custom-panels.md)
- [Sync a Custom Panel with External Data](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/sync-a-custom-panel-with-external-data.md)
- [About Auto Panels for Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/auto-panels/about-auto-panels.md)
- [About the React Elements API](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md)
- [Editor React Component Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/supported-extensions/site/editor-react-components/editor-react-component-extension-files-and-code.md)