About the Blocks-CLI Integration for Widgets

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. 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 CLIIn 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

  2. Add a Blocks widget to your CLI app. See guide

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.

blocks-cli

In the Blocks editor, you design your UI and configure your widgets' editor experience and installation settings:

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 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.

Release an app version

When your app is ready for production, you can release an app version in 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.

Did this help?