skills.rest
wix
wixOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wix-cli-site-widget

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

25|31|Updated Jan 25, 2026
Search Tags:#react#editor#extensions#web-component#wix#site-widget
One-click install
npx skills add https://github.com/wix/skills --skill wix-cli-site-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-cli-site-widget
Source: https://github.com/wix/skills/tree/main/wix-cli/skills/wix-cli-site-widget
Command: npx skills add https://github.com/wix/skills --skill wix-cli-site-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build and configure Wix site widgets as reusable web components that integrate with the Wix Editor.

Core Features & Use Cases

  • Converts React-based widgets into editable, configurable web components that appear in the Wix Editor.
  • Provides a built-in settings panel (panel.tsx) and widget logic (widget.tsx) with an extension registration (extensions.ts).
  • Supports deterministic development workflows with a predefined file structure (widget.tsx, panel.tsx, extensions.ts, optional references/scripts/assets).

Quick Start

Start by implementing widget.tsx and panel.tsx and then register the extension so the widget becomes available in the Wix Editor.

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 build a Wix site widget as a React web component?▼

You build a Wix site widget by implementing React component logic in widget.tsx, adding configuration controls in panel.tsx, and registering the extension in extensions.ts so it appears in the Wix Editor.

How does the Wix CLI extension workflow register widgets in the editor?▼

The Wix CLI workflow uses a mandatory extensions.ts file to register the widget, linking the React component and settings panel so the web component becomes editable in the Wix Editor.

Do I need to use specific naming conventions for Wix site widget props?▼

Yes, the workflow enforces kebab-case for widget props in the settings panel (panel.tsx) and camelCase for props received in the React component (widget.tsx).

Can I add a custom settings panel to a Wix Editor extension?▼

Yes, you add a custom settings panel to a Wix Editor extension by defining configuration controls in panel.tsx, which connects to widget.tsx to enable editable widget properties.

What files are required to create a configurable Wix site widget?▼

Creating a configurable Wix site widget requires widget.tsx for the React component, panel.tsx for the settings panel, and extensions.ts for the mandatory editor registration.

Why is my Wix site widget not appearing in the Wix Editor?▼

A Wix site widget fails to appear in the Wix Editor if the mandatory editor registration step in extensions.ts is missing or incorrectly configured within the CLI extension workflow.

Related Skills

Explore More Software Engineering Skills→
wixwix
25

wix-cli-app-validation

Automate dependency installation, TypeScript compilation, build, and preview for Wix CLI apps.

Official
Advanced
wixwix
25

wix-cli-site-plugin

Create Wix Site Plugins that inject custom elements into UI slots.

Official
Advanced
kateuszkateusz
13

editor-component-editors

Implement ECS component editors with collapsible UI and vector controls.

Community
Intermediate
wixwix
25

wix-cli-dashboard-page

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

Official
Advanced