skills.rest
ESSSoWhat
ESSSoWhatCOMMUNITY
Explore all skills by this author →
GitHub

wix-cli-dashboard-modal

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

Updated Feb 21, 2026
Search Tags:#react#dashboard#modal#popup#wix#wix cli#dashboard sdk
One-click install
npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-dashboard-modal-esssowhat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-dashboard-modal
Source: https://github.com/ESSSoWhat/live-translate-realtime-dubbing/tree/main/wix-app/np/.agents/skills/wix-cli-dashboard-modal
Command: npx skills add https://github.com/ESSSoWhat/live-translate-realtime-dubbing --skill wix-cli-dashboard-modal-esssowhat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building popup forms, confirmations, and detail views in Wix dashboards requires coordinating three separate files and correctly using the Dashboard SDK lifecycle methods, which is error-prone without clear guidance. ## Core Features & Use Cases - Modal Creation: Generate the three required files (extensions.ts, component .tsx, config.ts) in the correct dashboard modals directory with a unique UUID. - Data Passing: Pass parameters from dashboard pages into modals via openModal() and read them inside the modal with observeState(). - Lifecycle Control: Close modals with closeModal(), return data to the opener, and await the modalClosed promise. - Use Case: Add an "Edit Item" popup to a Wix dashboard page that receives the selected item, shows a form, saves changes, and returns the result to the parent page. ## Quick Start Create a Wix dashboard modal named EditItem that opens from my dashboard page and receives the selected item's data.

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

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

Pass a params object when calling dashboard.openModal({ modalId, params }). Inside the modal, use 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().

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

Params are not available as React props; you must call dashboard.observeState() inside the modal component to access them. Also verify you used modalId (not extensionId) matching the id field in extensions.ts.

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 popup forms, confirmations, and context-specific detail views triggered from dashboard pages.

Related Skills

Explore More Software Engineering Skills→
nirganonnirganon

wix-cli-dashboard-modal

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

Community
Intermediate
pnewsampnewsam
1

ui-feedback

Select feedback patterns for empty states, loading, errors, notifications, and confirmations.

Community
Intermediate
nirganonnirganon

wix-cli-dashboard-page

Generates Wix CLI dashboard page extensions with WDS components, data operations, and extension registration.

Community
Advanced
kim-yeo-appweb-labkim-yeo-appweb-lab

code-reviewer

Analyze code across multiple languages for best practices and security vulnerabilities.

Official
Advanced