Configure your Webflow app

The webflow.json file configures your Webflow app, defining how the CLI builds and deploys your code for each product. This file is created automatically when you run init commands, but you can modify it to customize behavior.

File location

Place webflow.json in the root of your app:

Schema

The webflow.json supports configuration for:

• Code Components
• DevLink
• Webflow Cloud
• Designer Extensions

Each product has its own set of configuration options. See below for the configuration options for each product.

Code Components

1
{
2
    "library": {
3
        "name": "<Your Library Name>",
4
        "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5
        "bundleConfig": "./webpack.webflow.js"
6
    }
7
}

DevLink

1
{
2
  "siteId": "<Your Site ID>",
3
  "devlink-export": {
4
    "rootDir": "./webflow",
5
    "components": ".*",
6
    "componentGroups": ".*",
7
    "ts": true,
8
    "cssScopes": true,
9
    "relativeHrefRoot": "/"
10
  }
11
}

Configuration options

siteId sits at the top of webflow.json; every other option below lives under the devlink-export object.

DevLink assumes reasonable defaults for most of the settings, but you can specify certain options to customize the behavior of DevLink management and setup. See the DevLink documentation for more details.

Webflow Cloud

1
{
2
  "cloud": {
3
    "app_id": "<Your App ID>",
4
    "framework": "astro"
5
  }
6
}

Designer Extensions

1
{
2
  "name": "<Your Extension Name>",
3
  "apiVersion": "2",
4
  "publicDir": "dist",
5
  "appIntents": {
6
    "image": ["manage"],
7
    "form": ["manage"]
8
  },
9
  "appConnections": [
10
    "myAppImageConnection",
11
    "myAppFormConnection"
12
  ]
13
}