Wix Dashboard Plugin Builder
Creates dashboard plugin extensions for Wix CLI applications. Dashboard plugins are interactive widgets that embed into predefined
slots
on dashboard pages managed by Wix first-party business apps (Wix Stores, Wix Bookings, Wix Blog, Wix eCommerce, etc.).
Dashboard plugins occupy the full width of their slot and maintain dynamic height based on content.
Quick Start Checklist
Follow these steps in order when creating a dashboard plugin:
Identify the target slot ID — see
Slots Reference
Create plugin folder:
src/extensions/dashboard/plugins/
< Card
< Card . Header title = "My Plugin" /
< Card . Divider /
< Card . Content size = "medium"
< Text
Plugin content goes here . < / Text
< / Card . Content
< / Card
< / WixDesignSystemProvider
) ; } ; export default Plugin ; Available Resources in Plugin Components React — Component logic and state management Wix SDK — Access Wix business solutions and site data Wix Dashboard SDK ( @wix/dashboard ) — Interact with the dashboard page's data passed to the slot Wix Design System ( @wix/design-system ) — Native-looking React components matching Wix's own dashboard UI Interacting with Dashboard Data Use observeState() from the Dashboard SDK to receive data from the host dashboard page: import { dashboard } from "@wix/dashboard" ; import { useEffect , useState } from "react" ; const Plugin : FC = ( ) => { const [ params , setParams ] = useState < Record < string , unknown
( { } ) ; useEffect ( ( ) => { dashboard . observeState ( ( componentParams ) => { setParams ( componentParams ) ; } ) ; } , [ ] ) ; return ( < WixDesignSystemProvider features = { { newColorsBranding : true } }
< Card
< Card . Content size = "medium"
< Text
Received data : { JSON . stringify ( params ) } < / Text
< / Card . Content
< / Card
< / WixDesignSystemProvider
) ; } ; Typed Props from Host Apps Some Wix apps expose typed interfaces for their slot parameters. Import them from the app's dashboard package: import type { plugins } from "@wix/blog/dashboard" ; type Props = plugins . BlogPosts . PostsBannerParams ; const Plugin : FC < Props
= ( props ) => { // props are typed according to the Blog Posts slot contract } ; Note: Typed props availability varies by Wix app. Consult the specific app's SDK documentation. Not all slots provide typed parameter interfaces. Extension Registration Extension registration is MANDATORY and has TWO required steps. Step 1: Create Plugin-Specific Extension File Each dashboard plugin requires an
.extension.ts file in its folder. See Plugin Builder Configuration above. Step 2: Register in Main Extensions File CRITICAL: After creating the plugin-specific extension file, you MUST read wix-cli-extension-registration and follow the "App Registration" section to update src/extensions.ts . Without completing Step 2, the dashboard plugin will not appear on the dashboard page. Sizing Behavior Dashboard plugins take the full width of their slot Height adjusts dynamically based on content within slot boundaries When using Dashboard SDK or dashboard-react SDK, dimensions change dynamically based on contents Troubleshooting Symptom Cause Fix Plugin not appearing on dashboard page Missing registration Import and .use() in src/extensions.ts Plugin not appearing on dashboard page Wrong slot ID Verify extends field matches a valid slot ID from Slots Reference Hard Constraints Do NOT invent or assume new types, modules, functions, props, events, or imports — use only entities explicitly present in the provided references or standard libraries already used in this project NEVER use mocks, placeholders, or TODOs in any code — ALWAYS implement complete, production-ready functionality The extends field MUST contain a valid slot ID from a Wix business app — do NOT invent slot IDs Prefer type-narrowing and exhaustive logic over assertions; avoid non-null assertions ( ! ) and unsafe casts ( as any ) Do NOT use // @ts-ignore or // @ts-expect-error ; fix the types or add guards instead Examples Blog Posts Banner Plugin Request: "Create a plugin for the Wix Blog posts page that shows a promotional banner" Output: Plugin targeting slot 46035d51-2ea9-4128-a216-1dba68664ffe (Blog Posts page) with a Card component displaying promotional content, using observeState() to access blog post data. Bookings Staff Calendar Widget Request: "Add a plugin to the Wix Bookings staff page that shows weekly availability" Output: Plugin targeting slot 261e84a2-31d0-4258-a035-10544d251108 (Bookings Staff page) with a schedule display component, using observeState() to receive staff data. Order Details Plugin Request: "Create a plugin on the eCommerce order page showing fulfillment status" Output: Plugin targeting slot cb16162e-42aa-41bd-a644-dc570328c6cc (eCommerce Order page) with status badges and fulfillment details, using observeState() to access order data. Output Constraints Token limits: Your max output is ~10,000 tokens. Plan your response to stay under this limit. If making a large file (>300 lines), split it into multiple smaller files with imports Only output files that are directly required for the task Do NOT add README.md or documentation files unless explicitly requested Verification After implementation, use wix-cli-app-validation to validate TypeScript compilation, build, preview, and runtime behavior.