Level up your Designer Extension with build mode updates

Webflow Designer Extensions let developers create tools that extend and expand the powers of the Webflow Designers. Whether for use by anyone or built into tools built for specific sites, it lets you add your own custom tooling to the platform. We've recently made some updates to the Designer APIs specifically to help improve the app experience when working with different user roles.

The Webflow Designer supports different types of roles to allow teams to control what different editors can do on your site. (Want to learn more? Check out the Webflow University tutorial on site roles.) But how does this impact Designer Extensions?

The way it was...

Before the change we just released, an extension could check if a particular action is available in a particular role. So for example:

const capabilities = await webflow.canForAppMode([ webflow.appModes.canDesign, webflow.appModes.canEdit]);

This returns an object with boolean values for canDesign and canEdit. While this role’s based check is helpful, developers need a bit more to better handle the different types of permissions available on a site.

What's new

We’ve shipped multiple updates to help make it easier for your Designer Extensions to handle and react to the different ways it could be running. First, we added getCurrentMode, which returns the current mode. In terms of our code and APIs, the mode refers to the role of the user currently running the extension. Here’s an example:

const mode = await webflow.getCurrentMode();

if (mode === "design") {
  showDesignUI();
} else if (mode === "build") {
  showBuildUI();
} else {
  showNeutralUI();
}

Secondly, you can also specifically check for a particular mode:

if (await webflow.isMode("design")) {
  await insertElement();
}

And finally, Designer Extensions had the ability to notice changes to the current mode, but we didn't actually pass the new mode in the event. This is as simple as adding a mode value in the event object passed:

const unsubscribe = webflow.subscribe("currentappmode", (event) => {
  console.log("New mode:", event.mode);

  if (event.appModes.canDesign) {
    showDesignTools();
  } else {
    hideDesignTools();
  }
});

To use these new features, Designer Extensions have to opt in by editing their weblow.json and adding:

"featureFlags": {
    "expandedAppModes": true
}

You can also set the value to false if you want to explicitly ensure these new features don't impact your extension.