Webflow Extension Starter

A minimal starter template for building Webflow Designer Extensions with React, TypeScript, Ultracite and Rspack.

Features

• React 19 with TypeScript
• Custom hooks for common Designer API patterns
  • useSelectedElement — Subscribe to element selection changes
  • useSiteInfo — Fetch site metadata
  • useElementSnapshot — Capture element screenshots with caching
• Rspack for fast Rust-based bundling
• Oxlint and Oxfmt for type-aware linting and formatting (via Ultracite)

Getting started

CLI (recommended)

npx create-webflow-extension@latest

The CLI will handle scaffolding the project for you. This includes cloning the repo, installing dependencies, and initializing a git repository (if desired). For more information, see the create-webflow-extension README.

Clone the template manually

git clone -b template https://github.com/Flash-Brew-Digital/webflow-extension-starter.git
cd webflow-extension-starter
npm install

The template branch is used by the CLI to scaffold new projects. The default package manager and linter/formatter are removed plus the .github directory. If you prefer to keep those, you can clone the main branch instead.

Development

pnpm dev

This runs Rspack in watch mode and starts the Webflow extension server at localhost:1337.

Testing in Webflow

1. Open your Webflow workspace settings
2. Navigate to Apps & Integrations → Develop
3. Click Create an App and configure it accordingly
4. Open a project in the Designer
5. Press E to open the apps panel and launch your extension

Project structure

├── src/
│   ├── hooks/
│   │   ├── useElementSnapshot.ts
│   │   ├── useSelectedElement.ts
│   │   └── useSiteInfo.ts
│   ├── app.tsx
│   ├── index.html
│   ├── index.tsx
│   ├── styles.css
│   └── types.ts
├── dist/                 # Build output
├── package.json
├── tsconfig.json
├── rspack.config.js
└── webflow.json          # Extension configuration

Scripts

Command	Description
pnpm dev	Start development server with hot reload
pnpm build	Production build
pnpm bundle	Build and bundle for deployment
pnpm type-check	Run TypeScript type checking
pnpm check	Run linter
pnpm fix	Auto-fix linting issues

Configuration

Extension settings

Edit webflow.json to configure your extension:

{
  "name": "Your Extension Name",
  "apiVersion": "2",
  "size": "comfortable",
  "publicDir": "dist"
}

Available sizes: default (240×360), comfortable (320×460), large (800×600)

Resources

• Designer Extensions documentation
• Designer APIs reference
• Webflow Apps UI Kit (Figma)

Contributing

Contributions are welcome! Please read our Contributing Guide for more information.

License

MIT License

Author

Ben Sabic at Flash Brew Digital