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

wix-cli-site-widget

Creates React-based custom element widgets with settings panels for Wix CLI applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-to-webcomponent, @wix/editor, @wix/design-system, @wix/data, @wix/site-window, @wix/astro, and includes references (resource) components.

What problem does it solve? Building interactive, configurable widgets for Wix sites requires coordinating React components, web component conversion, editor settings panels, and extension registration, which involves many error-prone conventions. ## Core Features & Use Cases - Widget Component Generation: Creates React components converted to web components via react-to-webcomponent with proper camelCase props and inline styles. - Settings Panel Construction: Builds Wix Editor settings panels using Wix Design System components, widget.getProp/setProp APIs, and native color and font pickers. - Extension Registration: Registers widgets with extensions.customElement() including UUID generation and main extensions.ts updates. - Use Case: Create a countdown timer widget where site owners configure the target date, colors, and fonts through a settings panel in the Wix Editor. ## Quick Start Create a Wix site widget that displays a countdown timer with configurable title, date, colors, and font settings.

Frequently Asked Questions about wix-cli-site-widget

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

FAQPage Schema
How do I create a custom element widget for a Wix site?▼

Create a widget.tsx React component converted with reactToWebComponent, a panel.tsx settings panel using @wix/design-system, and an extensions.ts file calling extensions.customElement() with a unique UUID. Then register it in the main src/extensions.ts file.

How do I add a settings panel to a Wix widget?▼

Build a panel.tsx wrapped in WixDesignSystemProvider and SidePanel, loading values with widget.getProp() and saving with widget.setProp() using kebab-case names. Use inputs.selectColor() and inputs.selectFont() from @wix/editor for color and font pickers.

Why is my Wix widget prop naming not working between widget and panel?▼

Props use camelCase in the widget.tsx Props interface and reactToWebComponent config, but kebab-case in widget.getProp() and widget.setProp() calls. The web component automatically converts between the two conventions.

Can I use Wix Data API inside a site widget?▼

Yes, but you must check the environment with wixWindow.viewMode() from @wix/site-window first. Show a placeholder when viewMode is Editor and only fetch collection data on the live site.

Why is my Wix widget not appearing in the editor?▼

The widget requires two registration steps: an extensions.ts file in the widget folder with a fresh UUID, and an import in the main src/extensions.ts file. Missing the second step prevents the widget from appearing in the Wix Editor.

Related Skills

Explore More Software Engineering Skills→
yaelbroyaelbro

wix-cli-extension-registration

Registers Wix CLI extensions with the app builder in src/extensions.ts.

Community
Basic
wixwix
25

wix-cli-site-widget

Build Wix site widgets as web components with React and extension registration.

Official
Advanced
yaelbroyaelbro

wix-cli-site-widget

Creates React-based custom element widgets with settings panels for Wix CLI applications.

Community
Advanced
nirganonnirganon

wix-cli-site-widget

Creates React-based custom element widgets with settings panels for Wix CLI applications.

Community
Advanced