Create your first Designer Extension

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

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

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

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.

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.

Open App the Webflow Designer

Open your test site in the Webflow Designer, and press the “E” key to open the app panel. Find your app and click “Launch development app” to see your extension running in the Webflow Designer.

Understand the starter functionality

Your extension’s UI includes a “Lorem Ipsum” button. When clicked, the extension:

• Gets the currently selected element in the Designer
• Replaces the text of the selected element with placeholder text

This code is found in src/index.ts.

1
document.getElementById("lorem").onsubmit = async (event) => {
2
  event.preventDefault();
3
  const el = await webflow.getSelectedElement();
4
  if (el && el.textContent) {
5
    el.setTextContent(
6
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
7
    );
8
  }
9
};

Improve the user experience with notifications

Currently, if no element is selected or the selected element doesn’t support text, nothing happens. Let’s add a notification to guide the user in these cases. To do this, we’ll add an else clause to the if statement in index.ts and use the webflow.notify() method to notify a user that they should choose a supported element.

Update your code as follows:

1
    document.getElementById("lorem").onsubmit = async (event) => {
2
      
3
      // Prevent the default form submission behavior, which would reload the page
4
      event.preventDefault()
5
6
      // Get the currently selected element in the Designer
7
      const el = await webflow.getSelectedElement()
8
9
      // Check if an element was returned, and the element can contain text content
10
      if (el && el.textContent) {
11
        // If we found the element and it has the ability to update the text content,
12
        // replace it with some placeholder text
13
        el.setTextContent(
14
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
15
          "eiusmod tempor incididunt ut labore et dolore magna aliqua."
16
        )
17
      } else { // If an element isn't selected, or an element doesn't have text content, notify the user
18
        await webflow.notify({ type: 'Error', message: "Please select an element that contains text." })
19
      }
20
    }

Now, if the user clicks the button without selecting a valid text element, they’ll see a clear error notification in the Designer.

Test your extension

Refresh your extension by clicking the icon in the top right of your Designer Extension.

• Select a text element and click the button: the text should update.
• Select a non-text element (like an image) and click the button: you should see an error notification.

If both behaviors work as described, you’ve successfully improved your extension.