For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • Variables & Collections
    • Variable Collections
    • Variables
        • Set variable value
        • Get variable value
        • Get variable name
        • Set variable name
        • Get variable binding
        • Get variable CSS name
        • Remove variable
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • variable.set(value, options?)
  • Parameters
  • Variable values by type
  • Returns
  • Examples
  • Designer ability
Variables & CollectionsVariablesManaging Variables

Set variable value

Was this page helpful?
Previous

Get variable value

Next
Built with

variable.set(value, options?)

Set the value of the selected variable.

Syntax

1variable.set(
2    value: string | number | {{SIZE_VALUE}} | Variable | {{CUSTOM_VALUE}},
3    options?: {
4        mode: {{VARIABLE_MODE}},
5    }
6): Promise<null>;

Parameters

ParameterDescriptionType
valueThe value to set for the variable. Must match the variable’s type. You can also pass a Variable object to create an alias, a CustomValue for custom values, or null to reset a mode-specific value to its default.string | number | SizeValue | Variable | CustomValue | null
optionsAn optional parameter to set the mode value of the variable.{mode: VariableMode}
Resetting a mode-specific value

To reset a mode-specific value back to the default base value, pass null when calling variable.set() along with the mode you want to reset. Variables without a mode-specific value won’t be affected.


Variable values by type

Color
Size
Number & Percentage
FontFamily
1collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>
Accepted Formats for ValueExamples
Color namecollection.createColorVariable("primary", "red");
RGB Hexcollection.createColorVariable("primary", "#ffcc11");
RGBA Hexcollection.createColorVariable("primary", "#fffcc11");

Returns

Promise<null>

A Promise that resolves to null

Examples

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

Try this example

Designer ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyVariablesAnyMainCanvasDesign