Check for a Designer mode

webflow.isMode()

Returns a boolean that shows whether the Designer is currently in the specified mode.

Use this method when you need to branch on a single mode and don’t need the full list of modes. To read the current mode directly, use webflow.getCurrentMode().

Syntax

1
webflow.isMode(mode: AppModeName): Promise<boolean>

Parameters

mode: AppModeName

The mode to check for. One of "design", "build", "preview", "edit", or "comment". See webflow.getCurrentMode() for the full list of modes and what each one represents.

Returns

Promise<boolean>

A Promise that resolves to true when the Designer is in the specified mode, or false otherwise.

Example

1
if (await webflow.isMode("design")) {
2
  // Run layout-editing code only in Design mode.
3
  await insertElement();
4
}

Example: Checking a mode before an action

Block an action and notify the user when the Designer is in the wrong mode for the operation:

1
async function insertDivIfInDesignMode() {
2
  if (!(await webflow.isMode("design"))) {
3
    await webflow.notify({
4
      type: "Error",
5
      message: "Switch to Design mode to insert elements.",
6
    });
7
    return;
8
  }
9
10
  const el = await webflow.getSelectedElement();
11
  if (el) {
12
    await el.append(webflow.elementPresets.DivBlock);
13
  }
14
}
15
16
await insertDivIfInDesignMode();