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.

Syntax

1
webflow.subscribe(
2
  event: "currentappmode",
3
  callback: (event: AppModeChangeEvent) => void
4
): 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:

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

1
const unsubscribeAppModes = webflow.subscribe('currentappmode', (event) => {
2
  console.log('New mode:', event.mode);
3
4
  if (event.appModes.canDesign) {
5
    // Design tools are available
6
  } else {
7
    // Prompt the user to switch to Design mode
8
  }
9
});

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:

1
// Before: extra canForAppMode() call required
2
const unsubscribe = webflow.subscribe('currentappmode', async () => {
3
  const capabilities = await webflow.canForAppMode(
4
    Object.values(webflow.appModes),
5
  );
6
  console.log(capabilities);
7
});

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

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

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:

1
const unsubscribe = webflow.subscribe("currentappmode", (event) => {
2
  if (event.mode === null) {
3
    renderFallbackUI();
4
    return;
5
  }
6
7
  if (event.appModes.canDesign) {
8
    renderDesignTools();
9
  } else if (event.appModes.canEdit) {
10
    renderContentEditingTools();
11
  } else {
12
    renderReadOnlyState();
13
  }
14
});
15
16
// Call unsubscribe() to stop receiving notifications.