Migrate a Site Plugin Extension

This guide explains how to add a site plugin extension to your new Wix CLI project as part of migrating an app from the legacy Wix CLI.

Folder structure

LegacyNew
src/site/plugins/<name>/plugin.jsonsrc/extensions/site/plugins/<name>/<name>.extension.ts
src/site/plugins/<name>/plugin.tsxsrc/extensions/site/plugins/<name>/<name>.tsx
src/site/plugins/<name>/panel.tsxsrc/extensions/site/plugins/<name>/<name>.panel.tsx
src/site/plugins/<name>/plugin.module.csssrc/extensions/site/plugins/<name>/<name>.module.css

Step 1 | Move and rename files

To move existing files into the new project:

  1. In the new project, create the folder src/extensions/site/plugins/<name>/.
  2. Copy and rename the files:
    • plugin.tsx<name>.tsx
    • panel.tsx<name>.panel.tsx
    • plugin.module.css<name>.module.css (if present)
  3. Update import references in the .tsx files to use the new filenames.
  4. Fix any other import paths in the .tsx files if needed, including imports of backend code.

Don't copy the old plugin.json file. It is replaced by a new .extension.ts file.

Step 2 | Create the extension file

In src/extensions/site/plugins/<name>/, create <name>.extension.ts:

Copy
FieldSourceRequired
idid from plugin.jsonYes. Must match legacy value to preserve the extension.
namemarketData.name or name from plugin.jsonYes
marketDatamarketData object from plugin.jsonNo
placementsplacements from plugin.jsonYes. Use [] if not set.
installation.autoAddinstallation.autoAddToSite or installation.autoAdd from plugin.jsonYes. Use false if not set.
tagNameUse the extension folder nameYes
elementPath to <name>.tsx, relative to src/Yes
settingsPath to <name>.panel.tsx, relative to src/Yes

Important: The id must match the value from the legacy plugin.json. Otherwise, the new entry is treated as a separate extension instead of a continuation of the legacy one.

Market data logo URLs

If the legacy plugin.json has a marketData.logoUrl that references a local assets/ folder, replace it with {{BASE_URL}}/site-plugin-logo.svg:

Copy

Step 3 | Register the extension

In the new project, in src/extensions.ts, import the extension and add it with .use():

Copy

Step 4 | Return to the main migration guide

Return to the Test, build, and release step in the main migration guide.

Last updated: 29 June 2026

Did this help?