> 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.

# User changes Designer mode

## `webflow.subscribe("currentappmode", callback)`

Subscribe to this event to detect when a user switches modes in the Designer, such as changing to Edit mode or selecting a secondary locale. This event helps you track the user's current mode, allowing your app to adjust the UI or display relevant error messages based on the available actions.

Tracking mode changes ensures your app provides the right experience at the right time, managing user expectations and preventing actions that aren’t allowed in the current mode.

> **What are App Modes?**
>
> Designer Extensions enhance user functionality while adhering to the Designer's current mode. Each method within the Designer API provides specific capabilities, aligning with actions available in each mode. For more context on this API, see the [App Modes](https://developers.webflow.com/designer/reference/app-modes) docs.

### Syntax

```typescript
webflow.subscribe(
  event: "currentappmode",
  callback: (event: AppModeChangeEvent) => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"currentappmode"`

The name of the event to subscribe to.

---

**callback**: `(event: AppModeChangeEvent) => void`

The callback function to execute when the event occurs.
The callback receives an `AppModeChangeEvent` object with the following properties:

| Property   | Type                            | Description                                                                                                                                                                      |
| :--------- | :------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`     | `AppModeName \| null`           | The name of the new Designer mode, or `null` when the internal state does not map to a public mode. One of `"design"`, `"build"`, `"preview"`, `"edit"`, or `"comment"`.         |
| `appModes` | `{ [key in AppMode]: boolean }` | The user's current capability booleans, keyed by capability name. The same object that [`webflow.canForAppMode()`](/designer/reference/get-users-designer-capabilities) returns. |

Callbacks that use the previous signature `() => void` continue to work.

---

### Returns

#### ***`Unsubscribe`***

This is a special function returned after subscribing. Call this function when you want to stop listening to the event and discontinue receiving notifications.

### When does the callback fire?

The callback fires when the user:

* Switches between Designer modes
* Switches branches
* Switches locales

The callback does not fire on other user activity, such as mouse movement, keystrokes, or element selection changes.

### Example

```typescript
const unsubscribeAppModes = webflow.subscribe('currentappmode', (event) => {
  console.log('New mode:', event.mode);

  if (event.appModes.canDesign) {
    // Design tools are available
  } else {
    // Prompt the user to switch to Design mode
  }
});
```

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

### Example: Before and after the event argument

Previously, the callback received no arguments and the extension had to call the `webflow.canForAppMode()` method to read the user's capabilities:

```typescript
// Before: extra canForAppMode() call required
const unsubscribe = webflow.subscribe('currentappmode', async () => {
  const capabilities = await webflow.canForAppMode(
    Object.values(webflow.appModes),
  );
  console.log(capabilities);
});
```

The callback now receives the mode and all capability booleans directly, so the extra call is no longer needed:

```typescript
// After: capabilities arrive with the event
const unsubscribe = webflow.subscribe('currentappmode', (event) => {
  console.log('Mode:', event.mode);
  console.log('Capabilities:', event.appModes);
});
```

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

### Example: Adapting the UI as the user switches modes

Re-render the UI whenever the user switches modes, branches, or locales. The callback's `appModes` property removes the need for a separate `webflow.canForAppMode()` call:

```typescript
const unsubscribe = webflow.subscribe("currentappmode", (event) => {
  if (event.mode === null) {
    renderFallbackUI();
    return;
  }

  if (event.appModes.canDesign) {
    renderDesignTools();
  } else if (event.appModes.canEdit) {
    renderContentEditingTools();
  } else {
    renderReadOnlyState();
  }
});

// Call unsubscribe() to stop receiving notifications.
```

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