> This page is for DevLink.

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

# Migrating to DevLink Export

> Upgrade an existing DevLink Sync project 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

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

```diff
- WEBFLOW_SITE_API_TOKEN=...
+ 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`.

> **If auth still fails after migrating**
>
> Run `webflow auth login --force` to clear the cached token and re-authenticate from scratch. This refreshes both the API token and its OAuth scopes, which fixes most token-related failures: stale tokens, missing scopes, or a token issued for the wrong Webflow account.
>
> If the failure mentions the site instead of the token, check that the `siteId` in `webflow.json` (or the `WEBFLOW_SITE_ID` env var) matches a site the token can access — re-auth alone won't fix a wrong site ID.

## 3. Update your `webflow.json`

You can do this either way:

* **Let the CLI prompt you.** Run `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.

```diff
  {
+   "siteId": "<your-site-id>",
-   "devlink": {
-     "rootDir": "./devlink",
-     "cssModules": true,
-     "skipTagSelectors": true,
-     "envVariables": { ... },
-     "overwriteModule": true,
-     "fileExtensions": { ... },
-     "relativeHrefRoot": "/"
-   }
+   "devlink-export": {
+     "rootDir": "./webflow",
+     "cssScopes": true,
+     "ts": true,
+     "components": ".*",
+     "componentGroups": ".*",
+     "relativeHrefRoot": "/"
+   }
  }
```

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:

```diff
  {
    "compilerOptions": {
      "paths": {
-       "devlink/*": ["./devlink/*"]
+       "webflow/*": ["./webflow/*"]
      }
    }
  }
```

## 5. Update import paths in your app code

```diff
- import { Hero } from 'devlink/Hero';
+ import { Hero } from 'webflow/Hero';

- import 'devlink/css/global.css';
+ import 'webflow/css/global.css';

- import { DevLinkProvider } from 'devlink/DevLinkProvider';
+ import { DevLinkProvider } from 'webflow/DevLinkProvider';
```

## 6. Re-run the export

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