Search props

1
element.searchProps(options?: { valueType?: BindableValueType }): Promise<Array<InstanceProp>>

1
interface InstanceProp {
2
  /** The prop's ID (matches the ID from the component's getProps/createProp). */
3
  propId: string;
4
  /** The binding value type (e.g. "string", "boolean", "textContent"). */
5
  valueType: BindableValueType;
6
  /** Whether this instance has overridden the default value for this prop. */
7
  hasOverride: boolean;
8
  /** The current value — always a { sourceType, ... } shape. */
9
  value: SettingValue;
10
  /** The final resolved value (never a binding reference). null if unresolvable. */
11
  resolvedValue: ResolvedValue | null;
12
  /** The default value from the component definition. */
13
  defaultValue: ResolvedValue | null;
14
  /** Display metadata for rendering in UI. */
15
  display: SettingDisplay;
16
}
17
18
type SettingValue = StaticPropValue | BindingValue;
19
20
interface StaticPropValue {
21
  sourceType: 'static';
22
  value: ResolvedValue | null;
23
}
24
25
type BindingValue =
26
  | { sourceType: 'prop'; propId: string; propName: string; propGroup: string | null }
27
  | { sourceType: 'cms'; collectionId: string; collectionName: string; fieldId: string; fieldName: string; fieldGroup: string | null; fieldType: CmsFieldType }
28
  | { sourceType: 'locale'; fieldKey: string; fieldName: string; fieldType: 'string' }
29
  | { sourceType: 'localeItem'; fieldKey: string; fieldName: string; fieldType: 'string' }
30
  | { sourceType: 'page'; fieldKey: string; fieldName: string }
31
  | { sourceType: 'conditional' }
32
  | { sourceType: 'legacy' };
33
34
type ResolvedValue =
35
  | string
36
  | number
37
  | boolean
38
  | null
39
  | LinkResolvedValue
40
  | VideoResolvedValue
41
  | RichTextResolvedValue;
42
43
interface SettingDisplay {
44
  label: string;
45
  group: string | null;
46
  trueLabel?: string;
47
  falseLabel?: string;
48
}

1
// Find a component instance 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
  // Get all props on the instance
7
  const props = await instanceEl.searchProps();
8
  console.log(props);
9
  // [
10
  //   {
11
  //     propId: 'prop_1',
12
  //     valueType: 'textContent',
13
  //     bindableTo: ['string', 'textContent'],
14
  //     hasOverride: true,
15
  //     value: { sourceType: 'static', value: 'My Custom Title' },
16
  //     resolvedValue: 'My Custom Title',
17
  //     defaultValue: 'Welcome to our site',
18
  //     display: { label: 'Heading', group: 'Content' }
19
  //   },
20
  //   {
21
  //     propId: 'prop_3',
22
  //     valueType: 'textContent',
23
  //     bindableTo: ['string', 'textContent'],
24
  //     hasOverride: false,
25
  //     value: {
26
  //       sourceType: 'cms',
27
  //       collectionId: 'col_abc123',
28
  //       collectionName: 'Blog Posts',
29
  //       fieldId: 'field_author',
30
  //       fieldName: 'Author Name',
31
  //       fieldType: 'plainText'
32
  //     },
33
  //     resolvedValue: 'Jane Doe',
34
  //     defaultValue: '',
35
  //     display: { label: 'Author', group: 'Content' }
36
  //   },
37
  //   {
38
  //     propId: 'prop_4',
39
  //     valueType: 'boolean',
40
  //     bindableTo: ['boolean', 'string'],
41
  //     hasOverride: false,
42
  //     value: { sourceType: 'static', value: true },
43
  //     resolvedValue: true,
44
  //     defaultValue: true,
45
  //     display: { label: 'Show CTA', group: 'Settings', trueLabel: 'Visible', falseLabel: 'Hidden' }
46
  //   }
47
  // ]
48
49
  // Filter to only text props
50
  const textProps = await instanceEl.searchProps({ valueType: 'textContent' });
51
}