> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Search bindable sources (Beta)

> Search for binding sources that are compatible with an element's settings.

## `element.searchBindableSources()`

Search for data sources that can be bound to the element's settings.
Binding sources include component props, CMS collection fields, locale fields, locale list item fields, and page fields.

This method is available on on `ComponentElement` and all element types that have settings.

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

## Syntax

```typescript
element.searchBindableSources(options?: SearchBindableSourcesOptions): Promise<Array<BindableSource>>
```

Related interfaces:

```typescript
interface SearchBindableSourcesOptions {
  /** Filter to sources compatible with a specific element setting key (e.g., "altText", "src", "domId") */
  settingKey?: string;
  /** Filter to sources that produce a specific value type (e.g., "string", "imageAsset") */
  valueType?: BindableValueType;
}

type BindableSource =
  | PropBindableSource
  | CmsBindableSource
  | PageBindableSource
  | LocaleBindableSource
  | LocaleItemBindableSource;

interface PropBindableSource {
  sourceType: 'prop';
  propId: string;
  propName: string;
  propGroup: string | null;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}

interface CmsBindableSource {
  sourceType: 'cms';
  collectionId: string;
  collectionName: string;
  fieldId: string;
  fieldName: string;
  fieldGroup: string | null;
  fieldType: CmsFieldType;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}

interface PageBindableSource {
  sourceType: 'page';
  fieldKey: string;
  fieldName: string;
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}

interface LocaleBindableSource {
  sourceType: 'locale';
  fieldKey: string;
  fieldName: string;
  fieldType: 'string';
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}

interface LocaleItemBindableSource {
  sourceType: 'localeItem';
  fieldKey: string;
  fieldName: string;
  fieldType: 'string';
  valueType: BindableValueType;
  bindableTo: readonly BindableValueType[];
}
```

## Parameters

**`options`** *(optional)*

An object with the following optional properties:

| Property     | Type                | Description                                                                                                                                                                                        |
| :----------- | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `settingKey` | `string`            | Filter results to sources compatible with a specific element setting key (e.g., `"altText"`, `"src"`, `"domId"`).                                                                                  |
| `valueType`  | `BindableValueType` | Filter results to sources that produce a specific value type. Accepted values: `"text"`, `"boolean"`, `"imageAsset"`, `"link"`, `"video"`, `"richText"`, `"file"`, `"lottieAsset"`, `"riveAsset"`. |

Both filters can be used together.
When no options are provided, all compatible binding sources for the element are returned.

## Returns

**Promise\<Array\<*BindableSource*>>**

A Promise that resolves to an array of `BindableSource` objects.
Returns an empty array when no sources match the filter criteria.

Each `BindableSource` has a `sourceType` discriminator with one of the following variants:

| `sourceType`   | Description                   | Key fields                                                                                       |
| :------------- | :---------------------------- | :----------------------------------------------------------------------------------------------- |
| `"prop"`       | A component prop              | `propId`, `propName`, `propGroup`, `propType`, `valueType`                                       |
| `"cms"`        | A CMS collection field        | `collectionId`, `collectionName`, `fieldId`, `fieldName`, `fieldGroup`, `fieldType`, `valueType` |
| `"locale"`     | A field on the current locale | `fieldKey`, `fieldName`, `fieldType`, `valueType`                                                |
| `"localeItem"` | A field on a locale list item | `fieldKey`, `fieldName`, `fieldType`, `valueType`                                                |
| `"page"`       | A field on the current page   | `fieldKey`, `fieldName`, `fieldType`, `valueType`                                                |

## Example

```typescript
// Get the selected element
const element = await webflow.getSelectedElement();

if (element) {
  // Get all bindable sources for the element
  const allSources = await element.searchBindableSources();
  console.log(allSources);
  // [
  //   { sourceType: 'prop', propId: 'prop_1', propName: 'Hero Image', propGroup: null, propType: 'image', valueType: 'imageAsset' },
  //   { sourceType: 'cms', collectionId: 'col_abc123', collectionName: 'Blog Posts', fieldId: 'field_img789', fieldName: 'Featured Image', fieldGroup: null, fieldType: 'image', valueType: 'imageAsset' },
  //   { sourceType: 'locale', fieldKey: 'language', fieldName: 'Language code', fieldType: 'string', valueType: 'text' },
  //   { sourceType: 'page', fieldKey: 'title', fieldName: 'Title', fieldType: 'string', valueType: 'text' },
  // ]

  // Filter by settingKey to find sources compatible with the 'src' setting
  const srcSources = await element.searchBindableSources({ settingKey: 'src' });

  // Filter by valueType to find sources that produce text values
  const textSources = await element.searchBindableSources({ valueType: 'text' });

  // Combine both filters
  const filtered = await element.searchBindableSources({ settingKey: 'altText', valueType: 'text' });
}
```

## Error handling

| Scenario                     | Error tag                 | Message                        |
| :--------------------------- | :------------------------ | :----------------------------- |
| Element not found or invalid | `ResourceMissingWithData` | `"Element not found: <id>"`    |
| Invalid `settingKey` value   | `InvalidRequest`          | `"Invalid settingKey: <key>"`  |
| Invalid `valueType` value    | `InvalidRequest`          | `"Invalid valueType: <value>"` |

```typescript
try {
  await element.searchBindableSources({ valueType: 'notAType' });
} catch (error) {
  console.log(error.tag);  // 'InvalidRequest'
  console.log(error.data); // 'Invalid valueType: notAType'

```

## Designer ability

Checks for authorization only

| Designer ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |