About Coding in Blocks

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

Visit Blocks Developers Docs

If you are a developer working with Blocks, make sure to visit these sites:

• The Velo API Reference website, specifically:
  • $widget
  • wix-widget
  • wix-editor
  • wix-application
  • wix-dashboard
  • Panel Elements
  • Dashboard Elements

In this overview article, we'll cover the varoius 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. Adding Velo code to your widget is just like adding code to a site page in the Wix Editors. Use this to implement your widget's internal business logic. Note that Blocks has a Properties and Events panel for your widget's elements. 
• 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 a desired action button and add code to determine what happens in the panel. 

Note that Blocks custom panels have designated API references: 

• wix-widget
• wix-editor
• Panel Elements

---

Dashboard Code

Add Dashboard pages to your app, to enable site builders to configure your app. Dashboard pages also have 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 dataset collections and access them in your app and site. Use the `wix-data` 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.

---

Installed App Instance Code

When your app is installed on a site, you can get information about that specific instance. One useful example of that is to learn about the pricing plan of this user. 

To do this, use the wix-application module.