> This page is for Webflow CLI. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developers.webflow.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server. # Configure your Webflow app > Learn how to configure your Webflow app with the Webflow CLI. 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: * Region targeting * 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. ### Region > **Requires Webflow CLI 2.9.0 or later** > > Region targeting is available on every release channel, including stable, starting with this version. Unlike the product-specific options below, `region` sits at the top level of `webflow.json`, alongside `siteId`: **`webflow.json`** ```json title="webflow.json" { "siteId": "", "region": "eu" } ``` | Field | Description | Default | Required | | -------- | --------------------------------------- | ------- | -------- | | `region` | Webflow region to target: `us` or `eu`. | `us` | No | The CLI resolves the active region in this order, highest priority first: 1. `--region ` flag 2. `WEBFLOW_REGION` environment variable 3. `region` in `webflow.json` 4. The region you last logged into (persisted in `~/.config/webflow/auth.json`, or `%APPDATA%\webflow\auth.json` on Windows) 5. `us` (default) In a CI/CD pipeline, set the environment variable rather than editing the manifest: ```bash WEBFLOW_REGION=eu webflow sites list ``` See [Production EU authentication](/cli/authentication#production-eu-authentication) for a full login walkthrough. --- ### Code Components **`webflow.json`** ```json title="webflow.json" { "library": { "name": "", "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"], "bundleConfig": "./webpack.webflow.js" } } ``` | Field | Description | Required | | -------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | | `name` | The name of your component library as it appears in Webflow | Yes | | `components` | Glob pattern matching your component files. To target a specific folder, use a path like `src/my-components/**/*.webflow.tsx`. | Yes | | `bundleConfig` | Path to a [custom webpack configuration](/code-components/webpack-configuration-overrides) file | No | --- ### DevLink ```json { "siteId": "", "devlink-export": { "rootDir": "./webflow", "components": ".*", "componentGroups": ".*", "ts": true, "cssScopes": true, "relativeHrefRoot": "/" } } ``` ### Configuration options `siteId` sits at the top of `webflow.json`; every other option below lives under the `devlink-export` object. | Option | Description | Default | Required | | :----------------- | :----------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------- | :------- | | `siteId` | Webflow site ID | `process.env.WEBFLOW_SITE_ID` | No | | `rootDir` | Directory to export components into | `./webflow` | Yes | | `cssScopes` | Enable CSS `@scope` wrapping for component styles | `true` | No | | `ts` | Generate TypeScript files for exported components | Auto-detected from `tsconfig.json` and `.ts`/`.tsx` files in the project on first export | No | | `components` | Regex pattern to match components to export | `.*` | No | | `componentGroups` | Regex pattern to match component groups to export | `.*` | No | | `relativeHrefRoot` | How relative `href` values are rewritten in exported Link and Image components | `/` | No | 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](/devlink/docs/component-export/installation#configuration-options) for more details. --- ### Webflow Cloud ```json { "cloud": { "app_id": "", "framework": "astro" } } ``` | Field | Description | Required | | ----------- | ------------------------------------------------------------------------------------------------------- | -------- | | `app_id` | Cloud app identifier. This is automatically set by the Webflow CLI when you run `webflow cloud deploy`. | Yes | | `framework` | Framework preset either `nextjs` or `astro` | Yes | > **Legacy \`project_id\` field** > > Before this rename, the Webflow CLI wrote a `project_id` field to `webflow.json`. The CLI still reads `project_id` as a fallback, so existing manifests keep working without changes. New deploys always write `app_id`. A future major release will drop the legacy field — feel free to switch your manifest to `app_id` whenever you redeploy. --- ### Designer Extensions ```json { "name": "", "apiVersion": "2", "publicDir": "dist", "appIntents": { "image": ["manage"], "form": ["manage"] }, "appConnections": [ "myAppImageConnection", "myAppFormConnection" ] } ``` | Field | Description | Default | Required | | :--------------- | :-------------------------------------------------------------- | :------ | :------- | | `name` | The name of your extension as it appears in Webflow | - | Yes | | `apiVersion` | The API version to use for your extension | `2` | Yes | | `publicDir` | The directory to build and serve the extension from | `dist` | Yes | | `appIntents` | The element types that can create connections to your extension | `{}` | No | | `appConnections` | The element types that can create connections to your extension | `[]` | No |