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.
Each framework serves a specific purpose in the workflow:
In the CLI | In Blocks |
---|---|
|
|
First, make sure to set up your app and add a widget:
Create a new CLI app or use an existing CLI app project. See guide
Add a Blocks widget to your CLI app. See guide
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:
Click Sync in Blocks to update the CLI environment with your latest UI changes. This does the following:
You can sync as often as needed, as long as the local development environment is running in the CLI.
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.
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.
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.