About Coding in Blocks

Blocks lets you add Velo code to your widgets and apps. Velo is a JavaScript-based development platform that accelerates the way you build Wix apps. You can add code to an individual widget, as well as code for the entire app.

Visit Blocks developer documentation

If you are a developer working in Blocks, make sure to review the following resources:

In this overview, we'll cover 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 (in the Wix Editors) or when it's added inside another widget. Use your widget API with the $widget namespace.

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.

Note that Blocks custom panels have designated API references: 

Dashboard code

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

dashboard code

Collection code

Blocks allows you to create dataset collections and access them in your app and site. Use the `wix-data` module to work with your collections. 

App namespace To use collections in Blocks, make sure your app has a  namespace

Code files and folders

App namespace To use code files, make sure your app has a  namespace

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.

public and backend

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.

To get the current app instance, use the wix-application module.

Did this help?