Designer API

Create your first Designer Extension

In this tutorial, you’ll learn how to create and run a Designer Extension that updates text on elements within the Designer. This guide is intended for developers who want to build custom functionality directly into the Webflow design environment.

By the end of this tutorial, you will be able to:

  • Install and configure the Webflow CLI
  • Scaffold a new Designer Extension project
  • Run your extension locally in the Webflow Designer
  • Programmatically update elements on a page
  • Use the Designer APIs to extend your extension’s capabilities

Prerequisites

Before you begin, make sure you have:

  • Node.js 16.20 or later
  • Access to a Webflow site for development and testing
  • A registered Webflow App installed on your test site

If you haven’t set up an app yet, follow the creating an App guide.

Set up your development environment

1

Install the Webflow CLI

Webflow’s CLI lets you create, manage, and locally run Designer Extensions from the command line.

To install the CLI globally, run:

$npm i -g @webflow/webflow-cli
2

Create a Designer Extension project

Use the CLI to scaffold a new Designer Extension with the recommended structure and settings. You can also use templates for frameworks like React and TypeScript. After creating your project, you’ll need to navigate to the project directory and install the dependencies.

Replace my-extension-name with your desired project name:

$webflow extension init my-extension-name react
>cd my-extension-name
>npm install
3

Review the project structure

Your new project folder will look like this. For a detailed explanation of each file and folder, see App Structure and App Settings.

my_example_extension/
├── node_modules/
├── public/             # Contains all the files to serve your designer extension
│   ├── index.html      # Required:This file serves as the initial point of entry for your single page app.
│   ├── index.js        # This file adds interactivity and dynamic behavior to your web app.
│   └── styles.css      # Defines the visual appearance of your App
├── src/                # Contains the source code for your designer extension
│   └── index.ts
├── package-lock.json
├── package.json
├── webflow.json        # Contains the settings for your designer extension
├── README.md       
└── tsconfig.json       # Contains the TypeScript configuration for your designer extension

Run your Designer Extension locally

Before you can test your extension in Webflow, you’ll want to run it locally to enable live development and preview changes as you make them.

1

Start the development server

Navigate to your project directory and run the following command to start the development server:

$npm run dev

This command serves your Designer Extension on port 1337 using the CLI’s webflow extension serve command and runs webpack in watch mode with npm run watch-webpack concurrently. This setup enables live updates as you develop.

While you can load your extension in a browser at http://localhost:1337, your app will only be able to interact with the Designer fully when loaded within the Webflow Designer.

2

Install your extension to your test site

In your Workspace Settings, navigate to the “Apps & Integrations” > “Develop” section. Find your App and select the ”…” button. Click “Install” and follow the instructions to install your extension to your test site.