> 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.

# Set Props (Beta)

> Set prop values on a component instance.

## `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

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

Related interfaces:

```typescript
interface SetInstancePropEntry {
  /** The prop ID to set. */
  propId: string;
  /**
   * The value to set. Either:
   * - A bare static value (string, number, boolean, object)
   * - A binding reference: { sourceType: 'prop', propId } | { sourceType: 'cms', collectionId, fieldId } | etc.
   * - null to disconnect/reset to default
   */
  value: unknown | null;
}
```

## Parameters

* `props`: *SetInstancePropEntry\[]* — An array of objects, each with the following fields:

| Field    | Type              | Description                                                                                 |
| :------- | :---------------- | :------------------------------------------------------------------------------------------ |
| `propId` | `string`          | The ID of the prop to set.                                                                  |
| `value`  | `unknown \| null` | The 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:

```typescript
// Bind to a parent component prop
{ sourceType: 'prop', propId: 'parent_prop_5' }

// Bind to a CMS field
{ sourceType: 'cms', collectionId: 'col_abc123', fieldId: 'field_author' }

// Bind to a locale field
{ sourceType: 'locale', fieldKey: 'languageCode' }

// Bind to a page field
{ 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

```typescript
// Get all elements on the page
const elements = await webflow.getAllElements()
const instanceEl = elements.find(el => el.type === 'ComponentInstance')

if (instanceEl?.type === 'ComponentInstance') {

  const updated = await instanceEl.setProps([

    // Set a static value override
    { propId: 'prop_1', value: 'New Heading' },

    // Bind to a parent component prop
    { propId: 'prop_2', value: { sourceType: 'prop', propId: 'parent_prop_5' } },

    // Bind to a CMS field
    { propId: 'prop_3', value: { sourceType: 'cms', collectionId: 'col_abc123', fieldId: 'field_author' } },

    // Disconnect binding and reset to component default
    { propId: 'prop_4', value: null },
  ])

  console.log(updated)

} else {
  console.log('No component instance found')
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |