Variables & CollectionsVariable ModesManaging Variable Modes

Get variable mode breakpoint

mode.getBreakpoint()

Get the breakpoint that drives a variable mode. Automatic modes return their BreakpointId. Manual modes return null.

Syntax

mode.getBreakpoint(): Promise<BreakpointId | null>

Returns

Promise<BreakpointId | null>: "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"

A Promise that resolves to the BreakpointId for an automatic mode, or null for a manual mode.

Example

// Get Collection
const collection = await webflow.getDefaultVariableCollection()
// Get Variable Mode
const variableMode = await collection?.getVariableModeByName(modeName)
try {
  // Get the breakpoint that drives the mode
  const breakpointId = await variableMode?.getBreakpoint()
  if (breakpointId != null) {
    console.log(`Automatic mode driven by the "${breakpointId}" breakpoint`)
  } else {
    console.log("Manual mode")
  }
} catch (err) {
  if (err.cause?.tag === "VariableModeInvalid") {
    // The mode no longer exists or has been removed
    console.warn(err.message)
  } else {
    throw err
  }
}

A getBreakpoint call rejects with a VariableModeInvalid error when the mode no longer exists or has been removed (Variable mode with id "X" not found).

Catch this error to recover gracefully and surface the message to the user.

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canReadVariablesAnyAnyAnyAny