ElementsElement Types & MethodsComponents

Set Props

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.

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