> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: About Coding in Blocks

## Article: About Coding in Blocks

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-coding-in-blocks.md

## Article Content:

# About Coding in Blocks

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

Blocks lets you add [JavaScript](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md) 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.


<blockquote class="standard">
  <strong>Note:</strong>
  
  Blocks is currently in a transition from using Velo modules to using the JavaScript SDK. Wherever available, this article suggests the relevant SDK modules. 

  Learn more about [developing with the SDK](https://dev.wix.com/docs/sdk/articles/get-started/about-site-development.md)
</blockquote>

## 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/about-the-widget-api.md) 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](https://www.wix.com/velo/reference/$widget) module.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/02/62aa041d-5eb1-4d8c-9d59-94da48f7295b/b45b78c8-bbeb-462a-a4c1-8c89bf227271.png)

## Panel code

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

[Design a custom panel](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md), connect it to an action button, and [add code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md) to determine what happens in the panel.

Blocks custom panels have designated API references: 

* [`@wix/editor`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) widget module in the SDK 
* [`wix-editor`](https://www.wix.com/velo/reference/wix-editor) Velo module 
* [`$w` Panel Elements](https://www.wix.com/velo/reference/$w/panelbutton)

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/02/544a0a26-0bd4-456c-a7f4-47949fb5800d/521b26a0-0693-486c-a590-8f67b99e9834.png)

## Dashboard code

Add [Dashboard pages](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/dashboard-pages/build-a-dashboard-page-in-blocks.md) 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`](https://www.wix.com/velo/reference/wix-dashboard)
* [Dashboard elements](https://www.wix.com/velo/reference/$w/dashboardbutton) 
* [Open Dashboard from a panel](https://www.wix.com/velo/reference/wix-editor/opendashboardpanel)

![dashboard code](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/09/14/61c9bf08-9350-4562-9ed0-649f18216518/ddd049c5-209e-4750-b36a-e497a4aaeeee.png)

## Collection code

Blocks allows you to [create CMS collections](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md) and access them in your app and site. Use the [`@wix/data`](https://dev.wix.com/docs/sdk/api-reference/data/introduction.md) SDK module to work with your collections.

## Code files and folders

Add [frontend or backend code files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md) for your entire app. These are also referred to as "code packages".

To add code to your app:

1. Click **Code** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2022/08/03/1f2f87c5-6a85-43b1-a688-1a688a8f3d0f/c9669055-bbe6-4d68-af9f-a49a96381372.png) in the left menu.
2. Select **Public & Backend** and add a file.

![public and backend](https://wixmp-833713b177cebf373f611808.wixmp.com/images/468291ad9ef19f95dc8df33f56f892ae.png)

## Current app instance

When your app is installed on a site, you can get information about the specific [app instance](https://dev.wix.com/docs/build-apps/develop-your-app/access/app-instances/about-app-instances.md) 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](https://dev.wix.com/docs/build-apps/develop-your-app/access/app-instances/identify-the-app-instance-in-backend-environments.md#blocks-backend-function).