> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# 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)`](/designer/reference/user-changes-mode).
To check whether the Designer is in one specific mode, use [`webflow.isMode()`](/designer/reference/is-mode).

### Syntax

```typescript
webflow.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:

| Mode    | Name        | Description                       |
| :------ | :---------- | :-------------------------------- |
| 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

```typescript
const mode = await webflow.getCurrentMode();

if (mode === "design") {
  console.log("The user is in Design mode.");
} else if (mode === null) {
  console.log("The Designer is not in a public mode.");
} else {
  console.log(`The user is in ${mode} mode.`);
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Example: Adapting the UI based on mode

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

```typescript
async function renderForCurrentMode() {
  const mode = await webflow.getCurrentMode();

  switch (mode) {
    case "design":
      await renderDesignTools();
      break;
    case "build":
      await renderContentEditingTools();
      break;
    case "preview":
    case "edit":
    case "comment":
      await renderReadOnlyState();
      break;
    default:
      await webflow.notify({
        type: "Info",
        message: "The Designer is not in a public mode.",
      });
  }
}

await renderForCurrentMode();
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)