Introduction to the Webflow CLI

The Webflow CLI brings Webflow development into your local environment, allowing you to use your own tools, workflows, and version control. Use the CLI to build and share code components, manage Webflow Cloud deployments, and sync code with your Webflow sites directly from the command line.

With the CLI, you can:

Share Code Components

Create reusable React components and deploy them directly to the Webflow Designer.

Export components with DevLink

Export your Webflow Components as React components.

Deploy to Webflow Cloud

Host and manage full-stack applications with serverless functions, data storage, and dynamic routing.

Create Designer Extensions

Develop custom applications that run directly inside the Webflow Designer.

Installation

Install the Webflow CLI globally using npm:

$
npm install -g @webflow/webflow-cli

Verify the installation:

$
webflow --version

Authentication

Authentication connects your local environment to your Webflow account, enabling you to deploy and sync code with Webflow.

$
webflow auth login

This opens your browser to complete authentication for a single workspace, site, or multiple sites within a workspace. Once successful, your credentials are stored locally for future commands. For more information, see the authentication documentation.

Configuration

The webflow.json file is used to configure the CLI and should always be in the root of your project. Here you’ll define your project type, and the configuration for each product you’re using.

Below is an example of a webflow.json file for a project that uses Code Components, DevLink, and Webflow Cloud. To see more on configuration, see the configuration documentation.

1
{
2
  "cloud": {
3
    "projectId": "<Your Project ID>",
4
    "framework": "astro"
5
  },
6
  "devlink": {
7
    "rootDir": "./devlink",
8
    "cssModules": true,
9
    "fileExtensions": {
10
      "js": "jsx"
11
    }
12
  },
13
  "extensions": {
14
    "name": "<Your Extension Name>",
15
    "apiVersion": "2",
16
    "publicDir": "dist"
17
  },
18
  "library": {
19
    "name": "<Your Library Name>",
20
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
21
    "bundleConfig": "./webpack.webflow.js"
22
  }
23
}

Product-specific commands

The CLI is organized by product:

Each command namespace includes additional commands specific to that product. Use --help with any command to see available options:

$
webflow library --help

For more information on each command, see the command reference.