About Coding in Blocks

Blocks lets you add JavaScript code to your widgets and apps. You can add code to an individual widget or dashboard page, as well as code for the entire app.

This overview covers the various places where you can add code to a Blocks app.

Widget code

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 enables you to add properties, functions, and events to the entire widget. These are exposed when your widget is installed on a site or when it's added inside another widget. Use your widget API with the $widget module.

Panel code

Blocks custom panels have their own code tab to create their logic.

Design a custom panel, connect it to an action button, and add code to determine what happens in the panel.

Blocks custom panels have designated API references:

• @wix/editor widget module in the SDK
• wix-editor Velo module
• $w Panel Elements

Dashboard code

Add Dashboard pages to your app to enable site builders to configure your app. Dashboard pages have a designated code tab, as well as designated APIs:

• wix-dashboard
• Dashboard elements
• Open Dashboard from a panel

Collection code

Blocks allows you to create CMS collections and access them in your app and site. Use the @wix/data SDK module to work with your collections.

Code files and folders

Add frontend or backend code files for your entire app. These are also referred to as "code packages".

To add code to your app:

1. Click Code in the left menu.
2. Select Public & Backend and add a file.

Current app instance

When your app is installed on a site, you can get information about the specific app instance that is currently running. For example, you can use the app instance to retrieve the pricing plan of the current user.

Learn more about working with the app instance in Blocks.