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:

1. Create widget folder: src/extensions/site/widgets/custom-elements/<widget-name>/
2. Create widget.tsx with React component and reactToWebComponent conversion
3. Create panel.tsx with WDS components and widget.getProp/setProp
4. Create extensions.ts with extensions.customElement() and unique UUID
5. Update src/extensions.ts to import and use the new extension

Architecture

Site widgets consist of two required files:

1. Widget Component (widget.tsx)