Configure your Webflow project

The webflow.json file configures your Webflow project, 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 your the root of your project:

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
  "devlink": {
3
    "rootDir": "./devlink",
4
    "cssModules": true,
5
    "fileExtensions": {
6
      "js": "jsx"
7
    }
8
  }
9
}

Configuration options

While DevLink will try to assume reasonable defaults for most of the settings, 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
    "projectId": "<Your Project 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
}