ElementsElement Types & MethodsComponents

Set Props (Beta)

element.setProps(props)

Set prop values on a component instance.

You can use this method to change one or more props by passing an array of prop IDs and new values. A value can be a static override, a binding to a data source, or null to disconnect any existing binding and reset the prop to its component default. The update is undoable via the Designer’s undo stack.

Beta

These methods are in public beta and may change with future releases.

Syntax

1element.setProps(props: SetInstancePropEntry[]): Promise<SetInstancePropEntry[]>

Related interfaces:

1interface SetInstancePropEntry {
2  /** The prop ID to set. */
3  propId: string;
4  /**
5   * The value to set. Either:
6   * - A bare static value (string, number, boolean, object)
7   * - A binding reference: { sourceType: 'prop', propId } | { sourceType: 'cms', collectionId, fieldId } | etc.
8   * - null to disconnect/reset to default
9   */
10  value: unknown | null;
11}

Parameters

  • props: SetInstancePropEntry[] — An array of objects, each with the following fields:
FieldTypeDescription
propIdstringThe ID of the prop to set.
valueunknown | nullThe value to assign. Can be a static value, a binding reference object, or null to reset.

Binding value shapes

Use an object with a sourceType field to bind a prop to a data source:

1// Bind to a parent component prop
2{ sourceType: 'prop', propId: 'parent_prop_5' }
3
4// Bind to a CMS field
5{ sourceType: 'cms', collectionId: 'col_abc123', fieldId: 'field_author' }
6
7// Bind to a locale field
8{ sourceType: 'locale', fieldKey: 'languageCode' }
9
10// Bind to a page field
11{ sourceType: 'page', fieldKey: 'seoTitle' }

Pass null as the value to disconnect any binding and reset the prop to its component default.

Returns

Promise<SetInstancePropEntry[]>

A Promise that resolves to an array of the entries that were set, in the same shape as the input.

Example

1// Get all elements on the page
2const elements = await webflow.getAllElements()
3const instanceEl = elements.find(el => el.type === 'ComponentInstance')
4
5if (instanceEl?.type === 'ComponentInstance') {
6
7  const updated = await instanceEl.setProps([
8
9    // Set a static value override
10    { propId: 'prop_1', value: 'New Heading' },
11
12    // Bind to a parent component prop
13    { propId: 'prop_2', value: { sourceType: 'prop', propId: 'parent_prop_5' } },
14
15    // Bind to a CMS field
16    { propId: 'prop_3', value: { sourceType: 'cms', collectionId: 'col_abc123', fieldId: 'field_author' } },
17
18    // Disconnect binding and reset to component default
19    { propId: 'prop_4', value: null },
20  ])
21
22  console.log(updated)
23
24} else {
25  console.log('No component instance found')
26}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canEditAnyAnyCanvasAny