Welcome to the Webflow CLI for designer extensions. This tool streamlines the development process for creating Webflow Designer Extensions. Let's get started!
To install the Webflow CLI, use the following npm command:
npm install -g @webflow/webflow-cli
There are three primary commands you'll use:
webflow extension init- Initializes a new designer extension project.
webflow extension serve- Serves your Designer Extension locally, allowing interaction with Webflow's Designer APIs within the Webflow Designer.
webflow extension bundle- Prepares the final bundle for your extension.
Strongly Recommended: Always start your project with
webflow extension init.
Doing so sets up a foundation tailored for Webflow Designer Extensions, and also ensures all necessary dependencies and configurations are in place.
If you choose not to initialize your project with the above command, make sure to download the Typings file for designer extensions:
npm install @webflow/designer-extension-typings
When you set up your project using
webflow extension init, npm scripts will be configured in your
package.json file. This means you can use these scripts to execute tasks instead of directly calling the CLI, offering a more streamlined development experience.
webflow extension serve is crucial. This serves your Designer Extension locally and allows it to interact with Webflow's Designer APIs. This is essential for testing and ensuring your extension behaves as expected within the Webflow environment.
- Ensure you have Node.js and npm installed before using the CLI.
- Regularly check for updates to the CLI and the Typings to ensure compatibility and get the latest features.
- Always refer to the official Webflow documentation for the most comprehensive and up-to-date information.