This guide will walk you through the complete setup for creating a Designer Extension. By the end of this guide, we’ll have completed the following steps:

Prerequisites

To successfully follow along with this guide, please ensure your system meets the following requirements:

• Node.js 16.20 or later
• A Webflow site for development and testing
• A registered Webflow App that's installed to your test site. If you haven't set up an App yet, please follow our guide on creating an App.

Step 1: Install the Webflow CLI

To build your Designer Extension locally, you’ll first need to download Webflow’s developer tools from NPM.

pen your terminal, and navigate to the folder where you’d like to create your App. Once you’re in your preferred folder, type the following command to download the CLI.

npm i @webflow/webflow-cli -g

Step 2: Initialize and configure your project

When you begin building your Designer Extension, Webflow provides a basic HTML and CSS scaffold to get you started. This scaffold is a simple web application that includes a header, main content area, and footer. It's designed to be easy to understand and modify, so you can quickly start building your own Designer Extension.

We recommend creating a new App using the init command, which creates the correct folder structure and initial code files for a Webflow App.

Decide a name for your App, then run the following command:

webflow extension init <your_app_name>

In your project folder, you should have a folder structure that looks similar to the image below. Find and update your webflow.json manifest file with the following information.

{  
  "name": "my-extension",
  "size": "default"
}

Step 3: Run your App

Let’s take our App for a whirl in our browser. To do that, we can spin up a local server and access our development App on a Webflow site.

1. Make sure you’re in the folder with your Designer Extension code, and run the following command.

npm run dev

2. Confirm that your extension is running on the default port 1337, or whichever port you've selected
3. To see our App running (locally) in Webflow, open your test site in the Webflow designer, click on the puzzle icon in the left panel. Locate and click on your App to open it’s detail pane, and click on “Run development app”

Voila! Your local starter App is now running in Webflow!