UtilitiesSite Information & Settings

Get the current Designer mode

webflow.getCurrentMode()

Returns the name of the Designer mode that the user is currently in.

Use this method to read the active mode on demand, such as when your extension launches or before an action runs. To react to mode changes as they happen, use webflow.subscribe("currentappmode", callback). To check whether the Designer is in one specific mode, use webflow.isMode().

Syntax

1webflow.getCurrentMode(): Promise<AppModeName | null>

Returns

Promise<AppModeName | null>

A Promise that resolves to the current mode name as a string, or null when the Designer’s internal state does not map to a public mode.

The Designer exposes five public modes:

ModeNameDescription
Design"design"Editing layout and styling
Build"build"CMS content editing on the canvas
Preview"preview"Read-only site preview
Edit"edit"Editor context outside the canvas
Comment"comment"Annotation and commenting

Example

1const mode = await webflow.getCurrentMode();
2
3if (mode === "design") {
4  console.log("The user is in Design mode.");
5} else if (mode === null) {
6  console.log("The Designer is not in a public mode.");
7} else {
8  console.log(`The user is in ${mode} mode.`);
9}

Example: Adapting the UI based on mode

Read the current mode when your extension launches and render the matching UI:

1async function renderForCurrentMode() {
2  const mode = await webflow.getCurrentMode();
3
4  switch (mode) {
5    case "design":
6      await renderDesignTools();
7      break;
8    case "build":
9      await renderContentEditingTools();
10      break;
11    case "preview":
12    case "edit":
13    case "comment":
14      await renderReadOnlyState();
15      break;
16    default:
17      await webflow.notify({
18        type: "Info",
19        message: "The Designer is not in a public mode.",
20      });
21  }
22}
23
24await renderForCurrentMode();