1. Designer Extensions Overview

Apps now offer a powerful way to expand the functionality of the Webflow Designer with Designer Extensions–allowing developers to create custom tools and features that integrate directly into the Webflow design process. Before we jump into development it's important to understand how they work. This guide provides an overview of how Designer Extensions work and the technologies behind them.

Designer Extension Preview

Load an iFrame within the Designer

Apps built with Designer Extensions are rendered as a single-page application within an iFrame in the Webflow Designer. This iFrame can host a simple script that uses the new client-side Designer APIs, or a complex web app that connects to a backend server and other third-party services.

An important detail to note – the Designer API’s scope is limited to the Canvas currently open in the Designer. Without explicitly including logic to access other resources via our Site Data APIs, the iFrame won’t have access to other pages, or any other project-related data that isn't on the current page.

Designer APIs and the Messaging Bridge

Our new Designer APIs serve as the primary conduit for Apps to interact with the Webflow Designer. These APIs enable a Webflow App to send commands and requests, which are sent via a Messaging Bridge that connects the App’s iFrame with the Designer Canvas.

These Designer APIs allow Apps to manage elements, properties, text, and styles within the canvas. Designer APIs operate on the client-side, which means they interact with the browser to access and manipulate elements, handle user interactions, and retrieve data from external sources.

When an App modifies an Element on the canvas — for example, updating a

padding — this change will appear to have been made directly by the user within their browser session, and will be recorded in the user's undo/redo history.

By making use of these APIs, developers can perform Create, Read, Update, and Delete (CRUD) operations on Canvas Elements.

The Webflow CLI

To access the Designer APIs, you’ll need to download and install Webflow’s CLI from NPM. Through the CLI you’ll be able to access the Objects and Methods that will allow you manipulate elements on the Webflow Canvas. Learn more about the Webflow CLI in the Designer API Reference.

npm i @webflow/webflow-cli

You can get started with an example project by typing the following command, and replacing with your extensions name.

webflow extension init your-extension-name

Potential Use Cases for Designer Extensions

With this new access to the designer, Apps can be used in a wide variety of ways to automate tasks, enhance design workflows, and integrate with other key services. Here are a few examples:

  • Automating alt text for images
  • Flipping colors for light to dark mode
  • Generating color swatches from services like Coolors
  • Asset resizing
  • Overwriting text
  • Converting PX to REM
  • Language translation
  • Finding and replacing Components, Images, Text
  • Injecting SVG icons
  • Connecting to third-party asset libraries (e.g., Unsplash)
  • Injecting Map content
  • Advanced pasting options (e.g., pasting table spreadsheets into HTML tables)
  • Selecting elements to display Analytics
  • Auditing tool for accessibility (e.g., contrast)
  • SEO validation