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

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

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

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:

async function insertDivIfInDesignMode() {
  if (!(await webflow.isMode("design"))) {
    await webflow.notify({
      type: "Error",
      message: "Switch to Design mode to insert elements.",
    });
    return;
  }
  const el = await webflow.getSelectedElement();
  if (el) {
    await el.append(webflow.elementPresets.DivBlock);
  }
}
await insertDivIfInDesignMode();