The Webflow CLI is a command-line interface that allows you to interact with various Webflow developer products, including Devlink and Designer Extensions.
npm install @webflow/webflow-cliThe Webflow CLI is a command-line interface that allows you to interact with various Webflow developer products, including Devlink and Designer Extensions.
You can install the Webflow CLI globally on your machine using npm:
``shell`
npm i @webflow/webflow-cli -g
- Webflow Designer APIs & Extensions
- Devlink
Designer Extensions are single-page web Apps that run inside of of the Webflow Designer, and manipulate elements on the canvas through Webflow's Designer APIs.. You can use the Webflow CLI to develop and package your Designer Extensions.
To create a new extension, use the webflow extension init command:
`shell`
webflow extension init my-extension
This command creates a new directory named my-extension with a basic scaffold for your extension. See more details about the scaffolding on the App structure reference.
Navigate to the newly created folder for your extension. You can serve your extension locally using the following command. The default port is set to 1337.
`shell`
npm run dev
This will run the webflow extension serve and command, allowing you test your App locally.
#### Options
- port - Serve your extension at a specific port on localhost: webflow extension serve 1234
If you're using the scaffolding built out from the webflow extension init command, you can create a build of your extension, an bundle it for publishing using the npm run build command:
`shell`
npm run build
This will run the webflow extension bundle CLI command, which will output a bundle.zip file in your extension’s directory. You can upload this extension to Webflow via the "Integrations" tab in your workspace settings. Note: The extension size limit is 5MB.
DevLink allows you to visually design and build web components for React directly in Webflow. Learn more in our DevLink overview, and read the DevLink documentation.
`shell`
npx webflow devlink -h
In order to use the DevLink CLI first you'll need to create a .webflowrc configuration file on your application's root directory.
The supported formats are JavaScript(.js) and JSON (.json).
It should look something like this:
JSON:
`json`
{
"host": "https://api.wfdev.io:8443",
"rootDir": "./devlink",
"siteId": "[YOUR SITE ID]",
"authToken": "[API TOKEN]"
}
JavaScript:
`js`
module.exports = {
host: "https://api.wfdev.io:8443",
rootDir: "./devlink",
siteId: "[YOUR SITE ID]",
authToken: process.env.WF_TOKEN,
};
You'll have to generate an API token to your application. This can be done on your Webflow project
by going to Site Settings > Integrations.
#### Sync your design system
`shell``
npx webflow devlink sync
By using Webflow DevLink you agree to the Webflow Labs Terms of Service.