Set variable value

variable.set(value, options?)

Set the value of the selected variable.

General Syntax

1
variable.set(value: VariableValue | Variable | CustomValue, options?: {mode: VariableMode});

Parameters

• value: VariableValue | Variable | CustomValue | null - The value to set for the variable. The value must match the variable’s type (e.g., a color variable requires a color value, a size variable requires a size value). You can also pass a Variable object to create a referenced variable or a CustomValue to set a custom value for the variable.

  • Note: null can only be passed in to reset a mode-specific value back to the default base value. Make sure to pass the mode you want to reset in the options parameter.

    Color

    Size

    Number & Percentage

    FontFamily

    CustomValue

    Accepted Formats for Value	Examples
    Color name	variable.set("red");
    RGB Hex	variable.set("#ffcc11");
    RGBA Hex	variable.set("#fffcc11");
    null (reset mode-specific value)	variable.set(null, {mode: variableMode});

• options: {mode: VariableMode} - An optional parameter to set the mode value of the variable.

Returns

Promise<null>

A Promise that resolves to null

Example

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get Variable
5
const variable = await collection?.getVariableByName("MyColorVariable")
6
7
// Check Variable type and set color
8
if (variable?.type === "Color") await variable.set("#fffcc11");

Designer Ability