Get Resolved Props

element.getResolvedProps()

Get the resolved values for all props on a component instance.

This method returns all props defined on the component in the same order as in the instance props panel on the canvas. Bindings are resolved to their final output values. For example, a prop bound to a locale returns the actual field value rather than the binding reference. Props that have not been overridden return their component default value.

Limitation: this method does not return resolved values for props that are bound to CMS values; it returns the binding reference instead.

To get the binding references instead of the resolved values, use element.getProps().

Syntax

1
element.getResolvedProps(): Promise<ResolvedPropValue[]>

Related interfaces:

1
interface ResolvedPropValue {
2
  /** The prop's ID. */
3
  propId: string;
4
  /** The final resolved value. Bindings are resolved to their output. */
5
  value: unknown;
6
}

Returns

Promise<ResolvedPropValue[]>

A Promise that resolves to an array of resolved prop values in panel display order.

Example

1
// Get all elements on the page
2
const elements = await webflow.getAllElements()
3
const instanceEl = elements.find(el => el.type === 'ComponentInstance')
4
5
if (instanceEl?.type === 'ComponentInstance') {
6
7
  const props = await instanceEl.getResolvedProps()
8
  console.log(props)
9
10
  /*
11
  [
12
    { propId: 'prop_1', value: 'My Custom Title' },
13
    { propId: 'prop_3', value: 'Jane Doe' },  // CMS binding resolved to field value
14
    { propId: 'prop_4', value: true },
15
  ]
16
  */
17
18
} else {
19
  console.log('No component instance found')
20
}

Designer Ability

Checks for authorization only.