Migrating to DevLink Export

The following steps walk an existing DevLink Sync project through the upgrade to DevLink Export. Work through them top to bottom — each step is independent and can be verified in isolation.

1. Bump the CLI and Node.js

$
npm install -D @webflow/webflow-cli@latest

DevLink Export requires @webflow/webflow-cli v1.19.0 or later, running on Node.js v22 or higher.

2. Update your .env

Rename the legacy token env var:

1
- WEBFLOW_SITE_API_TOKEN=...
2
+ WEBFLOW_API_TOKEN=...

WEBFLOW_WORKSPACE_API_TOKEN is also accepted but emits a deprecation warning — rename it the same way. WEBFLOW_SITE_ID is still supported as-is, though the canonical V2 location for the site ID is the top-level siteId field in webflow.json.

3. Update your webflow.json

You can do this either way:

• Let the CLI prompt you. Run npx webflow devlink export and the interactive setup walks you through each field, writing a fresh devlink-export: block. The old devlink: block isn’t auto-removed — delete it by hand once the new block is in place; the V2 CLI ignores it either way.
• Edit by hand. Apply the diff below directly.

1
  {
2
+   "siteId": "<your-site-id>",
3
-   "devlink": {
4
-     "rootDir": "./devlink",
5
-     "cssModules": true,
6
-     "skipTagSelectors": true,
7
-     "envVariables": { ... },
8
-     "overwriteModule": true,
9
-     "fileExtensions": { ... },
10
-     "relativeHrefRoot": "/"
11
-   }
12
+   "devlink-export": {
13
+     "rootDir": "./webflow",
14
+     "cssScopes": true,
15
+     "ts": true,
16
+     "components": ".*",
17
+     "componentGroups": ".*",
18
+     "relativeHrefRoot": "/"
19
+   }
20
  }

Notes on the option mapping:

• cssModules → use cssScopes instead. The mechanism changed (CSS Modules → CSS @scope) but the goal — keeping Webflow styles from leaking into the rest of your app — is the same.
• skipTagSelectors, envVariables, overwriteModule, fileExtensions → no replacement. Drop them.

4. Update your tsconfig.json path aliases

If you used the default ./devlink rootDir, update the alias to point at the new ./webflow folder:

1
  {
2
    "compilerOptions": {
3
      "paths": {
4
-       "devlink/*": ["./devlink/*"]
5
+       "webflow/*": ["./webflow/*"]
6
      }
7
    }
8
  }

5. Update import paths in your app code

1
- import { Hero } from 'devlink/Hero';
2
+ import { Hero } from 'webflow/Hero';
3
4
- import 'devlink/css/global.css';
5
+ import 'webflow/css/global.css';
6
7
- import { DevLinkProvider } from 'devlink/DevLinkProvider';
8
+ import { DevLinkProvider } from 'webflow/DevLinkProvider';

6. Re-run the export

$
npx webflow devlink export

This regenerates the webflow/ folder from your live Webflow components.

7. Migrate deprecated authoring patterns in the Designer

These don’t break the export, but they show deprecation warnings in the Designer:

• DevLink Slots → use Webflow’s native Slot element. The in-canvas Convert action handles the migration.
• Runtime Props → use the new Attributes prop. Existing Runtime Props will be automatically converted soon.

8. Verify

Build your app and confirm the exported components render with the same styles, fonts, and interactions as before.