The Webflow CLI streamlines the development process for creating Webflow Designer Extensions. Regularly check for updates to the CLI and the Designer Extension Type Definitions to ensure compatibility and take advantage of the latest features.
Prerequisites
Before installing the Webflow CLI, please be sure to have Node.js and npm installed.
Installation
To install the Webflow CLI, use the following npm command:
npm install -g @webflow/webflow-cli
Commands Overview
There are the three primary commands you'll use:
| Command | Description |
|---|---|
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 bundle.zip file for your extension, which is used to upload your file to Webflow for publication to the marketplace. |
Starting Your Project
Strongly recommended. Always start your project with webflow extension init.
This command will create a foundation tailored for Webflow Designer Extensions, and also ensures all necessary dependencies and configurations are installed correctly.
If you choose not to initialize your project with the above command, be sure to save the Designer Extension type definitions as a development dependency to take advantage of type checking and the autocomplete functionality of your IDE:
npm i --save-dev @webflow/designer-extension-typings
Designer Extension Templates
The CLI also supports initializing a Designer Extension to work with specific libraries and languages via a template, including React and TypeScript. To view all available templates, enter the following command:
$ webflow extension list
// Returns
> Your available templates are: default, react, typescript-alt
> 💡 Syntax: "webflow extension init projectName templateName"
> 🌟 Example: "webflow extension init my-first-extension react"
// Initialize project with React Template
$ webflow extension init my-new-react-extension react
After the project folder is created, navigate into the folder and run npm install to install all dependencies needed for your template.
Running your Designer Extension Locally
Before you can publish your extension, you need to build it with the Webflow CLI. This process compiles your code into a format that can be executed by the browser. Building your extension will create a file named bundle.zip, which contains the built version of your extension.
If you've built your project using the webflow extension init command, you can build your code using npm:
npm run build
Otherwise, navigate to your project folder and use the following CLI command:
webflow extension bundle
Working with Frameworks
For frameworks that generate browser-ready file structures (i.e. Next.js), build using the framework first. Then, process the output using webflow extension bundle. Consider adding this as a script in your package.json file. See our guide for more information on successfully working with frameworks.
Now that you’ve built your Designer Extension, it’s time to share it! Refer to our guide on uploading your Designer Extension, and publishing to the Webflow Marketplace.