About the Blocks-CLI Integration

The Wix CLI for Apps is a tool for building Wix apps using commands in the terminal and your local IDE. The Blocks-CLI integration offers a hybrid workflow that combines Wix Blocks' visual design capabilities with the Wix CLI development environment:

  • Visual development with Wix Blocks – Use the drag-and-drop editor and Wix-native elements to design your UI effortlessly.
  • Powerful developer tools with Wix CLI – Access advanced tooling, a local preview environment, hot code reloading, and more for a streamlined development experience.

Where to do what

Each environment 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

The Blocks-CLI integration currently supports only site widget extensions.

The following capabilities are not available with this integration:

  • Building Dashboard Pages in Blocks
  • Building Plugins in Blocks
  • Adding Collections in Blocks

Integrate a CLI project with Blocks

To begin, you must have an app project created using the Wix CLI. You can either open an existing project or create a new project.

You can then use the CLI commands to do the following:

  • Generate a Blocks site widget extension to initialize the integration with Blocks.
  • Start a local development environment.
  • Open the app in the Blocks editor.

For detailed instructions on integrating a CLI project with Blocks, see the CLI documentation.

Design the UI in Blocks and sync it to the CLI

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 click 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 your 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 using a direct install URL.

Did this help?