Webflow Designer API: Get variable binding

`variable.getBinding()`

Returns a binding value for the variable. Use the binding value when creating or updating variables with custom values.

Syntax

1 variable.getBinding(): Promise<string>

Returns

Promise<string>

A Promise that resolves to a string representing the variable’s binding.

Example

1 // Create a variable
2 const webflowBlue = await collection?.createColorVariable(
3   "blue-500",
4   "#146EF5"
5 );
6 
7 // Get the binding value for a variable
8 const binding = await webflowBlue.getBinding();
9 // binding = "var(--blue-500)"
10 
11 // Use the binding value to create a variable with a custom value
12 const webflowBlue400 = await collection.createColorVariable("blue-400", {
13   type: "custom",
14   value: `color-mix(in srgb, ${binding}, white 50%)`,
15 });

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadVariables	Any	Any	Any	Any

1	// Create a variable
2	const webflowBlue = await collection?.createColorVariable(
3	"blue-500",
4	"#146EF5"
5	);
6
7	// Get the binding value for a variable
8	const binding = await webflowBlue.getBinding();
9	// binding = "var(--blue-500)"
10
11	// Use the binding value to create a variable with a custom value
12	const webflowBlue400 = await collection.createColorVariable("blue-400", {
13	type: "custom",
14	value: `color-mix(in srgb, ${binding}, white 50%)`,
15	});