Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React/Next.js.
Export and sync Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance.
ALWAYS use Bash tool for all Webflow CLI operations:
webflow devlink sync via Bash toolwebflow --versionwebflow auth login for site authenticationPackage Manager Detection:
package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)webflow --version to confirm CLI is installedwebflow auth login)webflow.json with devlink sectionrootDir: Directory to export components intocssModules: Whether to use CSS modulesfileExtensions: File extensions for generated filescomponents regex pattern)webflow devlink sync with options:
--api-token or -t: Override API token from .env--site-id or -s: Override site ID from .envUser prompt:
Sync my Webflow components to my Next.js project
Step 1: Environment Verification
๐ DevLink Environment Check
Checking CLI installation...
โ Webflow CLI installed: v1.5.2
Current directory: /Users/user/projects/my-nextjs-app
Framework detected: Next.js 14
Checking for DevLink configuration...
โ ๏ธ No webflow.json with devlink configuration found
This appears to be your first DevLink sync.
Ready to configure? (yes/no)
User confirms: yes
Step 2: Configuration Setup
๐ DevLink Configuration
DevLink syncs Webflow components to your local project as React code.
Configuration needed in webflow.json:
{
"devlink": {
"rootDir": "./devlink", // Where to export components
"cssModules": true, // Use CSS modules
"fileExtensions": {
"js": "jsx" // or "tsx" for TypeScript
}
}
}
I'll help you create this configuration.
Questions:
1. Where should components be exported? (default: ./devlink)
2. Use TypeScript? (yes for tsx, no for jsx)
3. Use CSS modules? (recommended: yes)
User provides: ./src/devlink, yes (TypeScript), yes (CSS modules)
Creating webflow.json configuration...
{
"devlink": {
"rootDir": "./src/devlink",
"cssModules": true,
"fileExtensions": {
"js": "tsx"
}
}
}
โ Configuration created
โ ๏ธ Authentication Required:
DevLink needs your Webflow site ID and API token.
Run: webflow auth login
This will create a .env file with:
- WEBFLOW_SITE_ID
- WEBFLOW_SITE_API_TOKEN
After authentication, run sync again.
User prompt:
Run the DevLink sync
Step 1: Verification
๐ DevLink Sync Check
Checking configuration...
โ webflow.json found with devlink config
โ Root directory: ./src/devlink
โ CSS modules: enabled
โ File extensions: tsx
Checking authentication...
โ .env found with WEBFLOW_SITE_ID and WEBFLOW_SITE_API_TOKEN
Ready to sync components from Webflow.
Step 2: Sync Execution
๐ Syncing Components
Executing: webflow devlink sync
Output:
โ Connecting to Webflow site
โ Fetching components
โ Exporting components to ./src/devlink
โ Generating React components
โ Creating CSS module files
โ Creating index file
Sync complete!
๐ Generated Files:
./src/devlink/
โโโ index.ts (module exports)
โโโ Navigation.tsx (component)
โโโ Navigation.module.css (styles)
โโโ Hero.tsx (component)
โโโ Hero.module.css (styles)
โโโ Footer.tsx (component)
โโโ Footer.module.css (styles)
โโโ _webflow-style.css (global styles)
๐ Sync Summary:
- Components synced: 3
- Files created: 8
- Total size: 45 KB
Step 3: Integration Guidance
โ
DevLink Sync Complete!
๐ Components Available:
1. Navigation
2. Hero
3. Footer
๐ก How to Use:
Import components in your Next.js pages:
```tsx
import { Navigation, Hero, Footer } from './src/devlink'
export default function Home() {
return (
<>
<Navigation />
<Hero />
<Footer />
</>
)
}
Global Styles: Import the global DevLink styles in your _app.tsx or layout:
import '../src/devlink/_webflow-style.css'
๐ฆ No additional dependencies required! DevLink components use only React (already in your project).
๐ Future Updates:
Run webflow devlink sync again to pull latest design changes.
### Example 3: Update Existing Sync
**User prompt:**
Sync latest changes from Webflow
**Step 1: Pre-Sync State**
๐ DevLink Update Check
Current state: โ Configuration: ./src/devlink โ Existing components: 3 (Navigation, Hero, Footer) โ Last sync: 2 days ago
Capturing current state for comparison... โ Baseline captured
**Step 2: Sync**
๐ Syncing Updates
Executing: webflow devlink sync
Output: โ Connecting to Webflow site โ Fetching components โ Detecting changes โ Updating components โ Regenerating files
Sync complete!
**Step 3: Diff Analysis**
๐ Sync Analysis
Changes detected:
Modified Components:
Navigation.tsx
Hero.tsx
New Components: 3. CallToAction.tsx (new)
Unchanged:
๐ Files Updated:
โ 3 components updated, 1 new component added
๐ก New Component Available:
import { CallToAction } from './src/devlink'
<CallToAction />
### Example 4: Sync Specific Components
**User prompt:**
Only sync the navigation component from Webflow
**Configuration Update:**
๐ Filtering Components
To sync only specific components, update webflow.json:
Current configuration: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" } } }
Add components regex pattern: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" }, "components": "Navigation" // Regex pattern to match } }
Pattern options:
Update webflow.json? (yes/no)
*User confirms: yes*
โ Configuration updated
Syncing with filter: "Navigation"
Executing: webflow devlink sync
Output: โ Connecting to Webflow site โ Fetching components โ Applying filter: Navigation โ Exporting 1 component
๐ Generated: ./src/devlink/ โโโ index.ts โโโ Navigation.tsx โโโ Navigation.module.css
โ Synced 1 component (Navigation only)
### Example 5: Override Site ID and Token
**User prompt:**
Sync from a different Webflow site
**Response:**
๐ Sync from Different Site
To sync from a different site, use --site-id and --api-token options.
Get credentials:
Sync command:
webflow devlink sync --site-id <SITE_ID> --api-token <API_TOKEN>
Example:
webflow devlink sync \
--site-id 5f8a9b2c3d4e5f6g7h8i9j0k \
--api-token wfp_1234567890abcdef
This overrides the .env file values for this sync only.
โ ๏ธ Note: You can also:
Proceed with override? (yes/no)
### Example 6: TypeScript Configuration
**User prompt:**
Set up DevLink with TypeScript
**Response:**
๐ DevLink TypeScript Configuration
For TypeScript projects, configure file extensions:
webflow.json: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" // Use .tsx for TypeScript } } }
Benefits: โ Type-safe components โ Better IDE support โ Auto-completion โ Compile-time error checking
After sync, components will be generated as:
Usage with TypeScript:
import { Navigation } from '@/src/devlink'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div>
<Navigation />
{children}
</div>
)
}
Ready to sync? (yes/no)
## Guidelines
### Phase 1: CLI Verification
**Installation Check:**
```bash
# Check if CLI is installed
webflow --version
# If not installed, guide user:
npm install -g @webflow/webflow-cli
Authentication Check:
# Site authentication creates .env file
# Check for:
cat .env
# Should contain:
# WEBFLOW_SITE_ID=your-site-id
# WEBFLOW_SITE_API_TOKEN=your-token
# If missing, authenticate:
webflow auth login
webflow.json DevLink Schema:
{
"devlink": {
"rootDir": "./devlink",
"cssModules": true,
"fileExtensions": {
"js": "jsx"
}
}
}
All Configuration Options:
| Option | Description | Default | Required |
|---|---|---|---|
host | Webflow API host URL | https://api.webflow.com | No |
rootDir | Directory to export components into | ./devlink | Yes |
siteId | Webflow site ID | process.env.WEBFLOW_SITE_ID | No |
authToken | Webflow API authentication token | process.env.WEBFLOW_SITE_API_TOKEN | No |
cssModules | Enable CSS modules for component styles | true | No |
allowTelemetry | Allow anonymous usage analytics | true | No |
envVariables | Inject environment variables into exported components | {} | No |
components | Regex pattern to match components to export | .* | No |
overwriteModule | Whether to overwrite the module file | true | No |
fileExtensions | File extensions for exported components | { js: ".js", css: ".css" } | No |
skipTagSelectors | Exclude tag/ID/attribute selectors from global CSS | false | No |
relativeHrefRoot | Control how relative href attributes are resolved | / | No |
Common Configurations:
React with JavaScript:
{
"devlink": {
"rootDir": "./src/components/webflow",
"cssModules": true,
"fileExtensions": {
"js": "jsx"
}
}
}
Next.js with TypeScript:
{
"devlink": {
"rootDir": "./src/devlink",
"cssModules": true,
"fileExtensions": {
"js": "tsx"
}
}
}
Sync Specific Components:
{
"devlink": {
"rootDir": "./src/devlink",
"cssModules": true,
"components": "Navigation|Hero|Footer"
}
}
Basic Sync:
# Uses webflow.json config and .env credentials
webflow devlink sync
Sync with Options:
# Override site ID
webflow devlink sync --site-id 5f8a9b2c3d4e5f6g7h8i9j0k
# Override API token
webflow devlink sync --api-token wfp_1234567890abcdef
# Override both
webflow devlink sync \
--site-id 5f8a9b2c3d4e5f6g7h8i9j0k \
--api-token wfp_1234567890abcdef
# Short flags
webflow devlink sync -s <site-id> -t <api-token>
Sync Options:
--api-token / -t: The API token to use, overriding the .env file--site-id / -s: The site ID to sync from, overriding the .env fileDirectory Structure: After sync, rootDir contains:
./devlink/
โโโ index.ts // Module exports
โโโ ComponentName.tsx // Component file
โโโ ComponentName.module.css // Component styles (if cssModules: true)
โโโ AnotherComponent.tsx
โโโ AnotherComponent.module.css
โโโ _webflow-style.css // Global Webflow styles
Component Structure: Generated components are React functional components:
import React from 'react'
import styles from './ComponentName.module.css'
export function ComponentName() {
return (
<div className={styles.container}>
{/* Component markup */}
</div>
)
}
Index File: Exports all components for easy importing:
export { ComponentName } from './ComponentName'
export { AnotherComponent } from './AnotherComponent'
CLI Not Installed:
โ Webflow CLI Not Found
The Webflow CLI is required for DevLink.
Installation:
npm install -g @webflow/webflow-cli
After installation, verify:
webflow --version
Documentation: https://developers.webflow.com/cli
Not Authenticated:
โ Not Authenticated
DevLink needs authentication to access your Webflow site.
Steps:
1. Run: webflow auth login
2. Follow authentication prompts in browser
3. Select your site when prompted
4. Verify: .env file created with:
- WEBFLOW_SITE_ID
- WEBFLOW_SITE_API_TOKEN
5. Retry sync
Need help? https://developers.webflow.com/cli/authentication
No Configuration:
โ DevLink Not Configured
No webflow.json with devlink configuration found.
Create webflow.json in project root:
{
"devlink": {
"rootDir": "./devlink",
"cssModules": true,
"fileExtensions": {
"js": "jsx" // or "tsx" for TypeScript
}
}
}
Required fields:
- rootDir: Where to export components
After configuration, run: webflow devlink sync
Sync Failures:
โ Sync Failed
Error: [Specific error from CLI]
Common Causes:
- Network connection issues
- Invalid site ID or API token
- Insufficient permissions
- Site has no components to export
Solutions:
1. Check internet connection
2. Verify credentials in .env
3. Check site permissions in Webflow
4. Ensure site has published components
5. Try: webflow devlink sync --site-id <id> --api-token <token>
Retry sync? (yes/no)
Invalid Site ID:
โ Invalid Site ID
The provided site ID is invalid or inaccessible.
Check:
1. Verify WEBFLOW_SITE_ID in .env
2. Ensure you have access to the site
3. Check site ID in Webflow dashboard
Get site ID:
1. Open site in Webflow
2. Go to Site Settings
3. Find Site ID in General tab
Update .env and retry sync.
Reading Files: Always use Read tool (never modify):
# View DevLink configuration
Read: webflow.json
# View environment
Read: .env
# View generated component
Read: ./devlink/Navigation.tsx
# View generated styles
Read: ./devlink/Navigation.module.css
Discovering Files: Use Glob tool to find files:
# Find all generated components
Glob: ./devlink/**/*.tsx
# Find all CSS modules
Glob: ./devlink/**/*.module.css
# Find configuration
Glob: webflow.json
Never Use Write/Edit Tools:
For Sync:
๐ Syncing Components...
Connecting to Webflow... โ
Fetching components... โ
Generating React code... โณ
Creating CSS modules... โณ
Processed: 3/5 components
Elapsed: 8s
Configuration:
Development Workflow:
webflow devlink syncIntegration:
Version Control:
Multiple Sites:
components pattern to filterWorkflow: configure webflow.json โ authenticate โ sync
Key Commands:
webflow devlink sync - Sync components from Webflowwebflow devlink sync -s <id> -t <token> - Sync with overridesSync Options:
-s / --site-id - Override site ID-t / --api-token - Override API tokenConfiguration: webflow.json with devlink section
Schema (Required):
{
"devlink": {
"rootDir": "./devlink" // Required
}
}
Schema (Common):
{
"devlink": {
"rootDir": "./devlink",
"cssModules": true,
"fileExtensions": {
"js": "jsx" // or "tsx"
}
}
}
Authentication: Site authentication via webflow auth login
Environment: WEBFLOW_SITE_ID and WEBFLOW_SITE_API_TOKEN in .env
Verification: Check webflow --version and site authentication first
Generated Files: React components in rootDir with CSS modules
Documentation: https://developers.webflow.com/devlink