4. Quickstart: Designer Extensions

Prerequisites

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

  • Node.js 16.20 or later
  • macOS, Windows (including Windows Subsystem for Linux), and Linux are supported
  • 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 the Registration and Installation guide.

Install the Webflow CLI

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

Open 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

Automatic setup and configuration

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 custom 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.

Now you'll want to update your webflow.json manifest file with the following information.

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

Run your App locally

Let’s take our App for a whirl by getting it up and running in our browser. To do that, we can spin up a local server and access our App in our browser.

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

npm run dev

You should now see that it’s running on the default port 1337.

Launch your App in Webflow

Now it’s time for the magic! To see our App in Webflow, make sure you registered and installed your app to a site. Now, let’s open our test site in the Webflow designer, click on the puzzle icon in the left panel. If the test app is here, click on “Run development app”

Voila! Your local “Hello World” App is now running in Webflow! Now let’s make some design changes to our App.