About Widget Code in Blocks

Widget code lets you add custom functionality to your widget and expose an external API.

What widget code is used for

Add code to your widget to provide the following:

• Custom functionality and interactions. Select widget elements using their IDs and bind them to code, work with Wix's frontend and backend APIs, and more.
• Widget API. Your widget API lets you add properties, functions and events to the entire widget. These are exposed in the editor when your widget is installed on a site, or when it's nested inside another widget.

Where to write widget code

Where you add your widget code varies according to the tools you are using.

Add widget code in the Blocks Editor

If you are working directly in the Blocks editor:

• Make sure you selected the correct widget in the App Interface > Widgets panel.
• Write your widget logic in the code panel in the bottom part of your screen.
• Click the Widget API icon to add API properties, functions and events.
• You can also ask the Blocks AI to generate the widget code for you.

Add widget code in the Wix IDE for Blocks

If you are using the Wix IDE for Blocks, add your widget code in the following locations:

• Write the widget code in the site folder in the auto-generated file that has your widget's name.
• Click the Widget API icon to add API properties, functions and events.

Add widget code in the Blocks-CLI integration

If you are using the Blocks-CLI integration, add your widget code in the following files:

• Write widget logic in the widget.ts file.
• Write widget API properties, events and functions in the api.ts file.