# 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:

```shell
npm i @webflow/webflow-cli -g
```

# Usage

- [Webflow Designer APIs & Extensions](#webflow-designer-apis-and-extensions)
- [Devlink](#devlink)

## Webflow Designer Extensions and APIs
[Designer Extensions](https://docs.developers.webflow.com/v2.0.0/docs/apps-overview) are single-page web Apps that run inside of of the Webflow Designer, and manipulate elements on the canvas through [Webflow's Designer APIs.](https://docs.developers.webflow.com/v2.0.0/reference/introduction-1). 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:

```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](https://docs.developers.webflow.com/v2.0.0/reference/app-structure).

### 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.

```shell
npm run dev
```
This will run the `webflow extension serve` and command, allowing you test your App locally.

### 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:

```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

DevLink allows you to visually design and build web components for React directly in Webflow. [Learn more in our DevLink overview,](https://webflow.com/devlink) and read the [DevLink documentation](https://docs.developers.webflow.com/docs/devlink-documentation-and-usage-guide).

```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
```

# Terms of Service

By using Webflow DevLink you agree to the [Webflow Labs Terms of Service](https://webflow.com/legal/labs-terms).
