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 }

Try this example

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();

Try this example

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

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();