> 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 the Blocks-CLI Integration for Widgets
## Article: About the Blocks-CLI Integration
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/code-in-blocks/about-the-blocks-cli-integration-for-widgets.md
## Article Content:
# About the Blocks-CLI Integration for Widgets
**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).
**Important:** The Blocks-CLI integration only works with the [Wix CLI for Apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli-for-apps.md). The new [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md), which is the recommended tool for new app projects, doesn't support this integration.
The Blocks-CLI integration offers a hybrid workflow that combines the **Blocks visual design** capabilities with the **CLI development** environment.
This integration currently supports only [widgets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md). It does not support Blocks dashboard pages, plugins or collections.
## Where to do what
Each framework serves a specific purpose in the workflow:
| In the CLI | In Blocks |
|--------|-----------|
| - Create an app and integrate it with Blocks
- Code widget logic
- Code custom panel logic
- Define widget API properties, functions, and events
- Test your app in the editor and on a site
- Release an app version
| - Add and design widgets
- Configure a widget’s editor experience
- Add and design custom panels
- Configure installation settings
- Preview a widget’s design
|
## Get started
First, make sure to set up your app and add a widget:
1. Create a new CLI app or use an existing CLI app project. [See guide](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/get-started/quick-start.md)
2. Add a Blocks widget to your CLI app. [See guide](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/blocks-site-widgets/add-a-blocks-site-widget-extension-in-the-cli.md)
## Design and sync the UI in Blocks
When you've integrated your CLI project with Blocks, a **CLI Active** indication appears in the Blocks editor.
In the Blocks editor, you design your UI and configure your widgets' editor experience and installation settings:
* [Design your widgets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-design/blocks-widget-design-guidelines.md)
* [Create custom panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md)
* [Configure the editor experience](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-configuration/about-configuration-in-blocks.md)
* [Configure installation settings](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/configure-blocks-installation-settings.md)
Click **Sync** in Blocks to update the CLI environment with your latest UI changes. This does the following:
* Adds or deletes files for any widgets you added or removed.
* Updates code-completion suggestions for newly-added UI elements.
You can sync as often as needed, as long as the local development environment is running in the CLI.
Tip:
To define element IDs for selecting elements in your code, use the **Layers**  panel, as the **Properties and Events**  panel isn't available in the Blocks-CLI integration.
## Code and preview the app in the CLI
When using the CLI, you write your code in TypeScript and work with the Wix JavaScript SDK. The CLI does not support Velo APIs, and its code structure differs from widget and panel code in the Blocks editor.
From the CLI, you can preview and test your app in both the editor and the live site. The local development environment supports hot code reloading, so changes appear instantly in the browser.
For detailed instructions on coding and previewing your app in the CLI, see the [CLI documentation](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/blocks-site-widgets/add-a-blocks-site-widget-extension-in-the-cli.md).
## Release an app version
When your app is ready for production, you can [release an app version in the CLI](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md#build-and-deploy-an-app-with-the-cli). This allows you to publish it to the Wix App Market or install it on a site with a direct install link or [through the editor](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/install-a-blocks-app-on-a-site.md).