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 in the editor.

By default, the editor generates auto panels 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 and add it to your app.
3. Connect it to your component manifest through a custom action, 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
• An Editor React Component site extension

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.

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.

   Copy

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() 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'.
   Copy

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().

   Copy

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.

   Copy

   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.

See also

• About Custom Panels for Editor React Components
• Sync a Custom Panel with External Data
• About Auto Panels for Editor React Components
• About the React Elements API
• Editor React Component Extension Files and Code