Setting the chapter. One moment.
Skills
Chapter 12 of 28
Build Designer Extensions for custom Webflow Designer functionality.
4 minutes · 967 words · 26 sections
Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.
ALWAYS use Bash tool for all Webflow CLI operations:
webflow extension commands via Bash toolwebflow --versionwebflow auth login (if needed)Package Manager Detection:
package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)webflow --version to confirm CLI is installedwebflow extension listdefault - Basic HTML/CSS/JavaScript templatereact - React-based templatetypescript-alt - Alternative TypeScript templatewebflow extension init <project-name> <template>name (required) - Extension name as it appears in WebflowapiVersion (required) - API version (2)publicDir (required) - Directory to build from (dist)appIntents (optional) - Element types that can create connectionsappConnections (optional) - Connection configurationsnpm install in project directorywebflow extension serve [port]webflow extension bundleUser prompt:
Show me the available Designer Extension templatesResponse:
🔍 Designer Extension Templates
Listing available templates...
Executing: webflow extension list
Output:
Available templates:
1. default - Basic HTML, CSS, and JavaScript
2. react - React-based extension
3. typescript-alt - Alternative TypeScript template
To create a new extension:
webflow extension init <project-name> <template>
Example:
webflow extension init my-extension reactUser prompt:
Create a new Designer Extension called gallery-manager using ReactStep 1: Initialize Project
📋 Initialize Designer Extension
Project name: gallery-manager
Template: react
Executing: webflow extension init gallery-manager react
Output:
✓ Created extension project at ./gallery-manager
✓ Generated project structure
✓ Created webflow.json with extension schema
✓ Set up React template
📁 Project Structure:
./gallery-manager/
├── webflow.json # Extension schema
├── package.json # Dependencies
├── src/
│ ├── index.html
│ ├── index.tsx
│ └── styles.css
├── dist/ # Build output
└── README.md
Installing dependencies...
Executing: cd gallery-manager && npm install
✓ Dependencies installed (45 packages)Step 2: Show Schema
📋 Extension Schema (webflow.json)
Reading webflow.json...
{
"name": "Gallery Manager",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {},
"appConnections": []
}
Schema Fields:
✓ name (required) - Extension name in Webflow
✓ apiVersion (required) - API version: 2
✓ publicDir (required) - Build directory: dist
appIntents (optional) - Element connection types
appConnections (optional) - Connection configs
Extension ready for development!User prompt:
Run the extension on my local dev serverDefault Port (1337):
🚀 Starting Development Server
Executing: webflow extension serve
Output:
✓ Building extension
✓ Starting dev server
✓ Extension ready
📋 Development Server Running
Local URL: http://localhost:1337
Status: ✓ Active
How to Load in Designer:
1. Open Webflow Designer
2. Open any site
3. Load extension from URL: http://localhost:1337
Press Ctrl+C to stop serverCustom Port:
User: "Run on port 3000 instead"
🚀 Starting Development Server
Executing: webflow extension serve 3000
Output:
✓ Building extension
✓ Starting dev server on port 3000
✓ Extension ready
📋 Development Server Running
Local URL: http://localhost:3000
Status: ✓ Active
Load in Designer: http://localhost:3000User prompt:
Bundle my extension for uploadStep 1: Bundle
📦 Bundling Extension
Executing: webflow extension bundle
Output:
✓ Building production bundle
✓ Creating bundle.zip
✓ Bundle created successfully
Bundle Details:
- File: bundle.zip
- Location: ./dist/bundle.zip
- Size: 245 KB
✅ Bundle ready for upload!Step 2: Upload Instructions
📤 Upload Instructions
Your extension is bundled and ready to upload.
Upload Steps:
1. Go to Webflow Designer Extensions dashboard
2. Upload bundle.zip
3. Test the extension
4. Submit for review (if distributing)
Bundle location: ./dist/bundle.zipUser prompt:
Create a new Designer Extension for managing colorsStep 1: List Templates
🔍 Designer Extension Workflow
First, let me show available templates.
Executing: webflow extension list
Available templates:
1. default - Basic HTML/CSS/JavaScript
2. react - React-based (recommended)
3. typescript-alt - TypeScript alternative
Which template would you like to use? (default/react/typescript-alt)User selects: react
Step 2: Initialize
📋 Creating Extension
Project name: color-manager
Template: react
Executing: webflow extension init color-manager react
✓ Project created at ./color-manager
✓ webflow.json generated
✓ React template configured
Installing dependencies...
✓ npm install complete
📋 Extension Schema:
{
"name": "Color Manager",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {},
"appConnections": []
}Step 3: Start Development
🚀 Starting Dev Server
Executing: webflow extension serve
✓ Server running at http://localhost:1337
Load in Designer:
1. Open Webflow Designer
2. Load extension from: http://localhost:1337
3. Start developing!
Server running... (Press Ctrl+C to stop)Installation Check:
# Check if CLI is installed
webflow --version
# If not installed, guide user:
npm install -g @webflow/cliAuthentication (if needed):
# Site authentication if required
webflow auth loginList Templates Command:
webflow extension listAvailable Templates:
Init Command:
webflow extension init <project-name> <template>Arguments:
<project-name> (required) - Name of the new project directory<template> (required) - One of: default, react, typescript-altExample Commands:
# Initialize with default template
webflow extension init my-extension default
# Initialize with React template
webflow extension init my-extension react
# Initialize with TypeScript template
webflow extension init my-extension typescript-altProject Structure After Init:
/project-name/
├── webflow.json # Extension schema (required)
├── package.json # Dependencies
├── src/ # Source files
│ ├── index.html
│ ├── index.tsx (or .js)
│ └── styles.css
├── dist/ # Build output directory
└── README.mdSchema in webflow.json:
{
"name": "<Your Extension Name>",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {
"image": ["manage"],
"form": ["manage"]
},
"appConnections": [
"myAppImageConnection",
"myAppFormConnection"
]
}Schema Fields:
| Field | Description | Default | Required |
|---|---|---|---|
name | Extension name as it appears in Webflow | - | Yes |
apiVersion | API version to use for extension | 2 | Yes |
publicDir | Directory to build and serve extension from | dist | Yes |
appIntents | Element types that can create connections | {} | No |
appConnections | Connection configurations for extension | [] | No |
Required Fields:
name - Must be unique and descriptiveapiVersion - Currently must be “2”publicDir - Directory where built files are placed (default: “dist”)Optional Fields:
appIntents - Defines which element types can connect to your extension
{"image": ["manage"], "form": ["manage"]}appConnections - Array of connection identifiers
["myAppImageConnection", "myAppFormConnection"]Serve Command:
# Serve on default port (1337)
webflow extension serve
# Serve on custom port
webflow extension serve 3000Arguments:
[port] (optional) - Port number to serve on (default: 1337)Development Server:
Loading in Designer:
Bundle Command:
webflow extension bundleOutput:
bundle.zip file in project directorypublicDirBundle Contents:
CLI Not Installed:
❌ Webflow CLI Not Found
Designer Extensions require the Webflow CLI.
Installation:
npm install -g @webflow/cli
After installation, verify:
webflow --version
Documentation: https://developers.webflow.com/cliInvalid Template:
❌ Invalid Template
Error: Template "vue" not found
Available templates:
- default
- react
- typescript-alt
Retry with valid template:
webflow extension init my-extension reactPort Already in Use:
❌ Development Server Failed to Start
Error: Port 1337 is already in use
Solutions:
1. Stop other process on port 1337
2. Use different port:
webflow extension serve 3000
Find process using port:
lsof -ti:1337 | xargs kill -9Missing webflow.json:
❌ Extension Schema Not Found
Error: webflow.json not found in current directory
This directory is not an extension project.
Solutions:
1. Initialize new extension:
webflow extension init <name> <template>
2. Navigate to existing extension directory
3. Create webflow.json with required schemaBundle Failed:
❌ Bundle Creation Failed
Error: Build failed with errors
Common Causes:
- Missing dependencies (run: npm install)
- Build errors in source files
- Invalid webflow.json schema
- Missing publicDir directory
Fix errors and retry:
webflow extension bundleReading Extension Files: Always use Read tool (never modify):
# View extension schema
Read: webflow.json
# View package dependencies
Read: package.json
# View source files
Read: src/index.html
Read: src/index.tsxDiscovering Project Files: Use Glob tool to find files:
# Find all source files
Glob: src/**/*
# Find configuration files
Glob: *.json
# Find built files
Glob: dist/**/*Never Use Write/Edit Tools:
For Init:
📋 Creating Extension...
[████████████████████████] 100%
✓ Project created
✓ Dependencies installed
Elapsed: 12sFor Bundle:
📦 Bundling Extension...
[████████████████████████] 100%
✓ Bundle created: bundle.zip
Elapsed: 5sFor Serve:
🚀 Starting Server...
[████████████████████████] 100%
✓ Server ready at http://localhost:1337
Elapsed: 3sTemplate Selection:
Development Workflow:
Schema Configuration:
Local Development:
Bundling:
Workflow: list templates → init → serve → develop → bundle → upload
Key Commands:
webflow extension list - Show available templateswebflow extension init <project-name> <template> - Create new extensionwebflow extension serve [port] - Start dev server (default: 1337)webflow extension bundle - Create bundle.zip for uploadTemplates: default, react, typescript-alt
Schema Fields (webflow.json):
name (required) - Extension nameapiVersion (required) - API version (2)publicDir (required) - Build directoryappIntents (optional) - Element connection typesappConnections (optional) - Connection configsDev Server: http://localhost:1337 (opens in a new tab) (or custom port)
Bundle Output: bundle.zip in project directory
Documentation: https://developers.webflow.com/designer/reference/introduction (opens in a new tab)
Install this repository
npx skills add webflow/webflow-skills/plugin marketplace add webflow/webflow-skillsSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
main, last pushed 5 August 2026.SKILL.md, not by matching a directory convention. One layout observed: plugins/webflow-skills/skills/*/SKILL.md.h1 and no skipped levels:.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 chapter at its own .md URL.