wix-cli-dashboard-modal

Create and manage popup modal dialogs in Wix dashboard pages using the Dashboard SDK.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/yaelbro/Shelf-Control --skill wix-cli-dashboard-modal-yaelbro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wix-cli-dashboard-modal
Source: https://github.com/yaelbro/Shelf-Control/tree/main/.agents/skills/wix-cli-dashboard-modal
Command: npx skills add https://github.com/yaelbro/Shelf-Control --skill wix-cli-dashboard-modal-yaelbro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/dashboard, @wix/design-system, @wix/astro.

What problem does it solve? Building popup dialogs in Wix dashboard apps requires coordinating three separate files, registering extensions correctly, and managing data flow between dashboard pages and modals. This Skill provides the complete implementation pattern for creating, opening, and closing dashboard modals without guesswork. ## Core Features & Use Cases - Modal Creation: Generate the three required files (extensions.ts, component .tsx, config.ts) with proper UUID-based registration in the Wix CLI project structure. - Data Passing: Pass parameters from dashboard pages to modals via openModal() params and read them with observeState(), then return results through closeModal(). - Lifecycle Control: Open modals, await the modalClosed promise, and close modals with serializable return data. - Use Case: Build an edit-item confirmation dialog that opens from a dashboard page, receives the item object, lets the user modify fields, and returns the saved result to the parent page. ## Quick Start Create a Wix dashboard modal named 'edit-item' that opens from my dashboard page and receives an item object as a parameter.

Frequently Asked Questions about wix-cli-dashboard-modal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a modal in a Wix dashboard app?

Create three files in src/extensions/dashboard/modals/<folder>/: an extensions.ts builder file with a unique UUID id, a React .tsx component using CustomModalLayout, and a config.ts file for title and dimensions. Then register the modal in src/extensions.ts using .use().

How to pass data from a Wix dashboard page to a modal?

Pass data through the params field of dashboard.openModal(), including plain objects directly without encoding. Inside the modal, read the values with dashboard.observeState() and return results to the opener via dashboard.closeModal(data).

What data types can closeModal return in Wix dashboard?

closeModal accepts data cloneable via the structured clone algorithm: strings, numbers, booleans, plain objects, arrays, Dates, Maps, Sets, and ArrayBuffers. Functions, DOM nodes, class instances with methods, Symbols, and Promises are not supported.

Why can't my Wix dashboard modal access the params I passed?

Params passed to openModal are not available as React props. You must call dashboard.observeState() inside the modal component and read the values from the state callback, typically within a useEffect hook.

When should I use a dashboard page instead of a modal in Wix?

Use dashboard pages for static content and primary navigation views, and modals only for transient interactions like confirmations, quick forms, or detail overlays. For site-facing UI, use site widgets or embedded scripts instead of dashboard modals.