Setting the skill. One moment.
32 skills · 275 min
Skills
Skill 15 of 32
Export Webflow Designer components to React/Next.js code for external projects.
5 minutes · 1,003 words · 25 sections
Install
npx skills add webflow/webflow-skills --skill webflow-cli:devlinknpx skills add webflow/webflow-skills/plugin marketplace add webflow/webflow-skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
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)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.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
main, last pushed 21 September 2026.SKILL.md, not by matching a directory convention. One layout observed: plugins/webflow-skills/skills/*/SKILL.md.h1 and no skipped levels: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 projectStep 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 syncStep 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 KBStep 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_1234567890abcdefThis 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-cliAuthentication 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 loginwebflow.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 syncSync 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 stylesComponent 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/cliNot 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/authenticationNo 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 syncSync 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.cssDiscovering 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.jsonNever Use Write/Edit Tools:
For Sync:
🔄 Syncing Components...
Connecting to Webflow... ✓
Fetching components... ✓
Generating React code... ⏳
Creating CSS modules... ⏳
Processed: 3/5 components
Elapsed: 8sConfiguration:
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 (opens in a new tab)
.claude-plugin/marketplace.json by Webflow, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree./webflow/webflow-skills.md, and each skill at its own .md URL.