Getting Started

Install the Webflow CLI

Webflow’s CLI is a command-line interface that allows you to create, manage, and deploy Designer Extensions. It provides a set of commands for initializing, building, and running your Designer Extension, as well as for interacting with the Designer APIs.

To create a Designer Extension, you’ll need to install the Webflow CLI.

$
npm i @webflow/webflow-cli -g

Create a Designer Extension

The Webflow CLI provides a command to create a new Designer Extension with a basic structure and settings.

This command will create a new project folder with the necessary files and structure for your Designer Extension. Additionally, the CLI offers templates to work with specific libraries and frameworks, including React and Typescript.

$
webflow extension init my-extension-name react

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

Now that you’ve created your Designer Extension, let’s run it locally for development. The CLI provides a convenient development server that will automatically rebuild your extension whenever you make changes.

Run the following command in your project directory:

$
webflow extension serve

This will serve the Designer Extension on port 1337 using the CLI command webflow extension serve and run webpack in watch mode with npm run watch-webpack concurrently. Running these commands concurrently allows you to both serve your extension and automatically rebuild it whenever you make code changes, enabling a smooth development experience with live updates.

Open your Designer Extension in Webflow

To see your Designer Extension running in Webflow, you’ll need to load it in the Webflow Designer. Ensure your App is installed to your test site and open your test site in the Webflow Designer.

Click on the “Apps” icon in the left panel, and locate and click on your App to open its detail pane. Click on the “Launch development App” button to see your Designer Extension running in the Webflow Designer.

Modify elements with the Designer APIs

The starter project demonstrates a simple example of using the Designer APIs. When you select a text element on the page and click the “Lorem Ipsum” button, the Designer Extension will get the selected element and replace the text with “Lorem Ipsum” boilerplate text. This shows how Designer Extensions can programmatically modify content on the canvas.

This code that modifies elements is located in src/index.ts.

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
12
        // If we found the element and it has the ability to update the text content,
13
        // replace it with some placeholder text
14
        el.setTextContent(
15
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
16
          "eiusmod tempor incididunt ut labore et dolore magna aliqua."
17
        )
18
      }
19
    }

Update code in the Designer Extension

Let’s add some additional logic to our Designer Extension to handle a scenario where an element isn’t selected, or an element doesn’t have text content.

To change this, 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 an element.

Save these changes to your index.ts, and try selecting a non-text element to see the notification.

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