Welcome to the Webflow CLI for designer extensions. This tool streamlines the development process for creating Webflow Designer Extensions. Let's get started!
Installation
To install the Webflow CLI, use the following npm command:
npm install -g @webflow/webflow-cli
🔗 npm package
Commands Overview
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.
Starting Your Project
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
🔗 Typings npm package
Using npm Scripts
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.
Interacting with Webflow Designer APIs
The command 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.
Additional Notes
- 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.