Webflow Designer Extension Development

Build extensions that run inside Webflow's Designer as iframes, interacting with the Designer API to manipulate elements, styles, pages, and more.

Quick Start Workflow

Prerequisite: Register your app in Webflow first — see references/register-app.md. You'll need a Workspace with Admin permissions.

•Scaffold: npx create-webflow-extension@latest (interactive prompts for project name, package manager, linter)
•Develop: cd <name> && pnpm dev (serves at localhost:1337; also works with npm/yarn/bun)
•Test: Install app on test site via Workspace Settings > Apps & Integrations > Develop
•Open: Press "E" in Designer to open app panel, launch extension
•Build: pnpm build for deployment

CLI Options

bash

npx create-webflow-extension@latest [project-name] [options]

Options:
  --pm <pnpm|npm|yarn|bun>           Package manager to use (default: pnpm)
  --linter <oxlint|biome|eslint>     Linter to use
  --skip-git                         Skip git initialization
  --skip-install                     Skip dependency installation
  --quiet                            Suppress output

Designer API

For all API methods, patterns, and code examples, refer to the reference documentation below. Start with the quick lookup reference for a complete overview:

•Designer APIs Reference — all webflow.* methods in one table
•Elements API — element selection, insertion, presets, and the element builder
•Styles API — creating styles, setting CSS properties, breakpoints, and pseudo-states
•Components API — component definitions, instances, and editing context
•Variables API — design token variables (colors, sizes, fonts, numbers, percentages)
•Error Handling — error structure, cause tags, and recovery patterns

Project Structure

Generated by create-webflow-extension (React 19 + TypeScript + Rspack):

code

my-extension/
├── public/
│   └── index.html        # Entry point
├── src/
│   ├── App.tsx           # Main React component
│   ├── main.tsx          # React entry point
│   └── index.css         # Styles
├── webflow.json          # Extension settings
├── rspack.config.ts      # Rspack bundler configuration
├── package.json
└── tsconfig.json

Reference Documentation

Each reference file includes YAML frontmatter with name, description, and tags for searchability. Use the search script to find relevant references quickly:

bash

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

CLI & Tooling

•references/create-webflow-extension-reference.md: create-webflow-extension scaffolding CLI
•references/webflow-cli-reference.md: Webflow CLI for serving, bundling, and listing extensions

Designer API (detailed guides)

•references/designer-apis-reference.md: All APIs and methods in one place (start here)
•references/elements-api.md: Element manipulation and presets
•references/styles-api.md: Styling, breakpoints, pseudo-states
•references/components-api.md: Component definitions and instances
•references/pages-api.md: Page and folder management
•references/variables-api.md: Design token variables and collections
•references/assets-api.md: Asset upload and management
•references/extension-utilities.md: Site info, events, notifications, app discovery, authentication
•references/error-handling.md: Error structure, cause tags, and recovery patterns
•references/code-examples.md: Cross-API workflow examples combining multiple APIs

Design & Marketplace

•references/design-guidelines.md: UI design for native Webflow look
•references/register-app.md: Registering a Webflow App and configuring capabilities
•references/marketplace-guidelines.md: Marketplace review criteria (safety, technical, design, branding)
•references/app-submission-and-listing.md: Submitting your app and creating an effective listing
•references/faq.md: FAQ and troubleshooting for extensions, marketplace, and common issues

Scripts

•scripts/validate-extension.py: Validate extension structure before bundling
•scripts/search_references.py: Search reference files by tag, keyword, or list all with metadata

Assets

•assets/webflow-variables.css: CSS variables for Webflow's design system colors, typography, and shadows

Best Practices

•Check element capabilities: Always verify element.children before append/prepend, element.textContent before text operations
•Handle errors gracefully: Use try/catch with webflow.notify() for user feedback — see Error Handling
•Responsive design: Test on multiple breakpoints when setting styles — see Styles API
•Use variables: Leverage design token variables for consistent theming — see Variables API
•Subscribe to events: Use Designer events to keep extension state in sync — see Extension Utilities
•Appropriate sizing: Use webflow.setExtensionSize() for proper panel dimensions — see Extension Utilities