Skill

wix-cli-extension-registration

Register Wix CLI extensions with the app in src/extensions.ts. Use when registering new or existing extensions with the main app builder, adding .use() calls, importing extensions, or updating the extensions chain. Triggers include register extension, extensions.ts, app().use(), import extension, extension not appearing.

From wix
Install
1
Run in your terminal
$
npx claudepluginhub wix/skills --plugin wix
Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Wix App Registration

After creating any extension file, you must update the main src/extensions.ts file to register the extension with the app.

Why Registration Matters

The Wix CLI discovers extensions through the src/extensions.ts file — it's the single entry point that tells the build system which extensions exist. Without registration:

  • Dashboard pages won't appear in the sidebar
  • Site widgets won't show in the Wix Editor
  • Service plugins won't be called during checkout flows
  • Event handlers won't receive webhook deliveries
  • Embedded scripts won't be injected into site pages

The most common cause of "my extension isn't working" is a missing .use() call in this file.

Simple Pattern (Recommended for Small Apps)

src/extensions.ts - Import and register extensions directly:

import { app } from "@wix/astro/builders";
import { dataExtension } from "./extensions/data/extensions.ts";
import { dashboardpageMyPage } from "./extensions/dashboard/pages/my-page/extensions.ts";
import { embeddedscriptMyScript } from "./extensions/site/embedded-scripts/my-script/extensions.ts";

export default app()
  .use(dataExtension)
  .use(dashboardpageMyPage)
  .use(embeddedscriptMyScript);

Steps for each new extension:

  1. Import the extension from its extensions.ts file
  2. Add .use(extensionName) to the app chain
  3. Chain multiple extensions together

Advanced Pattern (For Large Apps)

src/index.ts - Re-export all extensions:

export { dashboardpageMyPage } from "./extensions/dashboard/pages/my-page/extensions";
export { embeddedscriptMyScript } from "./extensions/site/embedded-scripts/my-script/extensions";
export { dataExtension } from "./extensions/data/extensions";

src/extensions.ts - Register all extensions programmatically:

import { app } from "@wix/astro/builders";
import * as allExtensions from "./index";

const extensionList = Object.values(allExtensions);

const appBuilder = app();
extensionList.forEach((extension) => {
  appBuilder.use(extension);
});

export default appBuilder;

Extension Types Without Registration

The following extension types do not require extensions.ts files:

  • Backend API - Astro server endpoints are auto-discovered

Naming Conventions

Extension export names follow this pattern: {extensiontype}{CamelCaseName}

Examples:

  • dashboardpageCartPopupManager
  • dashboardpluginBlogPostsBanner
  • dashboardmenupluginExportPosts
  • embeddedscriptCouponPopup
  • sitewidgetCountdownWidget
  • sitepluginProductBadge
  • ecomshippingratesCustomShipping

The type prefix is the extension type in lowercase with no separators.

Troubleshooting

SymptomCauseFix
Extension not appearing at allMissing .use() callAdd import and .use(extensionName) to src/extensions.ts
"Cannot find module" on buildWrong import pathVerify the path in your import matches the actual file location (relative to src/)
Extension registered but not workingExport name mismatchEnsure the exported name in the extension file matches the import in extensions.ts
Multiple extensions, only some workIncomplete chainCheck that every extension has both an import and a .use() call
TypeScript error on .use()Wrong export typeEnsure extension file uses the correct builder method (e.g., extensions.dashboardPage() not extensions.embeddedScript())
Stats
Stars3
Forks2
Last CommitMar 15, 2026