The Wix CLI allows you to add site extensions to your app.
The following site extensions are available in the CLI:
You can add these extensions using the npm run generate command.
With site plugins, you can create interactive and feature-rich widgets that seamlessly integrate into Wix’s business solutions such as Wix Stores and Wix Bookings, extending their functionality and user experience. You can implement site plugin extensions in your app using the CLI. Read more about site plugin extensions.
Site widgets are draggable UI components that Wix site owners can add to pages on their website. They enhance a site's functionality by displaying content or enabling site visitors to perform various tasks. When working in the site editor, site owners can adjust the size of the widget, reposition it, and customize it using its settings panel.
The CLI provides two kinds of site widget extensions that you can implement in your app: custom element site widget extensions, and Blocks site widget extensions.
Custom element site widgets extensions are built in the CLI with custom element technology. The custom element is a new HTML tag that you define in local code files. The custom element is made available in the Wix editors as a widget.
Use the custom element site widget extension if you want to design your widget entirely with code, or you want to keep your development entirely within the CLI.
Add a custom element site widget extension in the CLI.
Blocks site widget extensions are created with a hybrid development workflow that combines the visual design capabilities of Wix Blocks with the CLI development environment. Read more about the Blocks-CLI integration.
This extension allows you to use the drag-and-drop Blocks Editor and Wix-native elements to effortlessly design your widget's UI. You can sync your design in the Blocks editor to the CLI in one click, automatically creating code files for your widget and its panels. You can then develop your widget's logic in these code files in your local IDE.
Any changes synced from the Blocks Editor or made in your local code files are immediately reflected in your test site and editor in your local development environment.
Use the Blocks element site widget extension if you want to take advantage of the visual design capabilities of Blocks, or if you want to separate your design and coding concerns.
Add a Blocks site widget extension in the CLI.
An embedded script is an app extension that injects an HTML code fragment into the DOM of a site. You can implement an embedded script extension in your app using the CLI. Read more about embedded script extensions.