wix-cli-site-widget

SKILL.md

Wix Site Widget Builder

Creates custom element widget extensions for Wix CLI applications. Site widgets are React components converted to web components that appear in the Wix Editor, allowing site owners to add interactive, configurable widgets to their pages with a built-in settings panel.

Quick Start Checklist

Follow these steps in order when creating a site widget:

 Create widget folder: src/extensions/site/widgets/custom-elements/<widget-name>/

 Create widget.tsx with React component and reactToWebComponent conversion

 Create panel.tsx with WDS components and widget.getProp/setProp

 Create extensions.ts with extensions.customElement() and unique UUID

 Update src/extensions.ts to import and use the new extension

Architecture

Site widgets consist of two required files:

1. Widget Component (widget.tsx)