Apps

Designer Extensions

A Designer Extension creating elements on the canvas.

Designer Extensions are web applications that run directly inside the Webflow Designer. Using the Designer APIs, you can create powerful new tools that integrate seamlessly with a user’s workflow, helping them design, create, and optimize their sites faster than ever.

What you can build

Using the Designer APIs, you can build extensions that programmatically interact with a user’s design and content in real-time. This opens up a world of possibilities for workflow automation and creative tooling.

Automate layout and content creation

Generate complex components, populate data from third-party sources, or build entire page structures with a single click.

Manage design systems

Create tools that allow users to apply and maintain consistent branding, manage variables, and swap themes.

Streamline asset management

Build extensions that connect to external asset libraries, optimize images, or automate asset organization.

Create dynamic site structures

Programmatically add and organize pages and folders, perfect for sites with complex information architecture.

How they work

Designer Extensions are single-page applications that run inside a secure iframe within the Webflow Designer. They use Webflow’s client-side Designer APIs to communicate with the Designer, allowing your app to perform actions that would typically require manual user intervention. For more advanced use cases, your extension can also integrate with your own backend services and third-party APIs including Webflow’s Data APIs.

The development workflow

From your first line of code to a public Marketplace launch, here’s an overview of the development process.

1

Register your App in Webflow

Before you can start building, you need to register a new app within your Webflow Workspace settings.

2

Create a Designer Extension from the CLI

Use the Webflow CLI to scaffold a starter project and run a local development server for live testing.

3

Build with the Designer APIs

The Designer APIs are how your app will interact with the Webflow canvas, providing a robust interface to control the Designer.

4

Publish to your Workspace

When you’re ready, upload your extension to Webflow to share it with your team for testing and internal use in your Workspace.

5

Submit to the Marketplace

Share your creation with the world by submitting it to the Webflow Marketplace.

FAQs

Yes, you can use the Data APIs in your Designer Extension to access and update data from Webflow’s servers. This is called a Hybrid App. When you setup your app, you’ll need to select both the Data Client and Designer Extension options.

You can use any framework that outputs static resources and runs in a browser environment. Just make sure your extension fits within the iframe dimensions provided by Webflow.

1

Install your extension on a test site

In the left sidebar of your workspace, navigate to Apps & Integrations > Develop. Click the ”…” button next to your app and select Install App. You’ll see an authorization screen where you can select the sites or workspace you want to install the app on.

2

Run the extension in development mode

In your terminal, navigate to your project folder and run the following command:

$webflow extension serve

This will start development mode locally (port 1337).

3

Preview and interact with your extension in the Designer

On your test site, open the Apps pane and find your app. Click “Launch Development App” to preview and interact with your locally hosted extension in the Designer.

  • Double-check your use of the Designer APIs and ensure you’re using the correct methods.
  • Check the browser console for errors and review our error handling guidelines.
  • Designer APIs only access content on the current page, not other sites or pages.
  • Make sure your app has the right permissions and scopes.
  • For Data API issues, verify you’re using the correct endpoints and valid tokens.
  • Designer Extensions run in an iframe with controlled dimensions. Check your configuration and use resizing methods if needed.
  • Use scoped CSS or scoped class names to avoid style conflicts with Webflow’s native styles.
  • Test at different viewport sizes to ensure responsive behavior.

Only Workspace admins can upload new bundles. If you’re not an admin, contact your Workspace administrator to upload the bundle or grant you the necessary permissions.

  • Make sure you’ve bundled your app with the Webflow CLI and uploaded your Designer Extension via the Dashboard.
  • Confirm the app is installed on your site or workspace (check the App Development section in your workspace).