skills.rest
thisisjaymehta
thisisjaymehtaCOMMUNITY
Explore all skills by this author →
Website𝕏@thisisjaymehtaGitHub

wix-cli-dashboard-modal

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

Updated Mar 20, 2026
Search Tags:#react#dashboard#modal#popup#dialog#wix#wix-cli
One-click install
npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wix-cli-dashboard-modal-thisisjaymehta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-dashboard-modal
Source: https://github.com/thisisjaymehta/login-with-email-test/tree/main/.agents/skills/wix-cli-dashboard-modal
Command: npx skills add https://github.com/thisisjaymehta/login-with-email-test --skill wix-cli-dashboard-modal-thisisjaymehta

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, and handling data passing between pages and modals, which is error-prone without clear guidance. ## 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. - Lifecycle Control: Open modals with openModal(), close them with closeModal(), and await results via the modalClosed promise. - Bidirectional Data Passing: Send params into modals and read them with observeState(), then return structured data back to the opener on close. - Use Case: Build an edit-item dialog that opens from a dashboard page, receives the selected item object, lets the user modify it, and returns the save result to the parent page. ## Quick Start Ask the AI to create a Wix dashboard modal with a form that opens from your dashboard page and passes the selected item's data into it.

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, a React .tsx component using CustomModalLayout, and a config.ts for title and dimensions. Then register the modal in src/extensions.ts with .use().

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

Pass a params object in dashboard.openModal({ modalId, params }) from the page. Inside the modal, call dashboard.observeState() to read those values. Objects are passed directly without encoding.

How do I return data when closing a Wix dashboard modal?▼

Call dashboard.closeModal(data) with any structured-cloneable value such as strings, objects, arrays, Dates, Maps, or Sets. The opener receives it by awaiting the modalClosed promise returned by openModal(). Functions and DOM nodes are not supported.

Why can't my Wix modal read the params passed to openModal?▼

Params are not available as React props; you must subscribe with dashboard.observeState() inside a useEffect to access them. Also verify you used modalId (not extensionId) matching the id field in the extensions.ts builder file.

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

Use dashboard pages for static or primary content and site widgets for site-facing UI. Modals are intended for transient interactions like confirmations, popup forms, and context-specific detail views triggered from dashboard pages.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-dashboard-page

Scaffold Wix CLI dashboard pages with page.tsx, extensions.ts, and registration wiring.

Official
Advanced
nirganonnirganon

wix-cli-dashboard-modal

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

Community
Intermediate
nirganonnirganon

wix-cli-dashboard-menu-plugin

Creates configuration-only dashboard menu plugin extensions for Wix CLI applications.

Community
Intermediate
GitHamza0206GitHamza0206
1.5k

deploy

Deploy the Simba chat widget to client websites with API connectivity.

Community
Intermediate