Changelog

The base variable mode — the default set of values that variables fall back to — is now first-class in the Designer API. It has the reserved ID "base" and, by default, the name "Base mode".

You can now work with the base mode like any other mode:

• Rename it with mode.setName(). Its ID stays "base" even after it’s renamed.
• Retrieve it by ID with collection.getVariableModeById("base"), or by its (default or renamed) name with collection.getVariableModeByName().

1
// Get the default variable collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get the base mode by its reserved ID and rename it
5
const baseMode = await collection.getVariableModeById("base")
6
console.log(await baseMode?.getName()) // "Base mode"
7
await baseMode?.setName("Light")

Behavior change: getAllVariableModes includes the base mode

collection.getAllVariableModes() now includes the base mode in the returned array (as the first entry). If your integration iterates over the result, it will now encounter the base mode — for example, when listing or counting a collection’s modes.

1
const collection = await webflow.getDefaultVariableCollection()
2
const modes = await collection.getAllVariableModes()
3
4
// The base mode is now part of this list
5
for (const mode of modes) {
6
  console.log(await mode.getName())
7
}

For more information, see Variable Modes.