Webflow CLI

The Webflow CLI is a command-line interface that allows you to interact with various Webflow developer products, including Devlink and Designer Extensions.

Installation

You can install the Webflow CLI globally on your machine using npm:

npm i @webflow/webflow-cli -g

Usage

• Webflow Designer APIs & Extensions
• Devlink

Webflow Designer Extensions and APIs

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.

Creating an Extension

To create a new extension, use the webflow extension init command:

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.

Running your Extension Locally

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.

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

Building and Bundling your Extension

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:

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

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.

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:

{
  "host": "https://api.wfdev.io:8443",
  "rootDir": "./devlink",
  "siteId": "[YOUR SITE ID]",
  "authToken": "[API TOKEN]"
}

JavaScript:

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

npx webflow devlink sync

Terms of Service

By using Webflow DevLink you agree to the Webflow Labs Terms of Service.