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

# Create multiple props (Beta)

> Creates multiple props on a component in a single transaction

## `component.createProps(options)`

Creates multiple props on a component in a single transaction.
This is the bulk counterpart to [`component.createProp()`](/designer/reference/managing-components/create-prop), accepting an array of prop definitions and returning an array of created props in the same order.

> **Note**
>
> The operation is all-or-nothing: if any prop in the array fails validation, no props are created.

Name conflict auto-increment applies across the entire batch and against props that already exist on the component.
For example, if two items in the array both specify `name: 'Heading'` in the same group, the second becomes `'Heading 2'`.

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

### Syntax

```typescript
component.createProps(options: CreatePropOptions[]): Promise<Prop[]>
```

The `CreatePropOptions` type and `Prop` response type are identical to those used by [`component.createProp()`](/designer/reference/managing-components/create-prop).

### Parameters

* **`options`** : *CreatePropOptions\[]* — An array of prop definitions.
  Each item uses the same shape as the `options` parameter of `component.createProp()`.
  The array must contain at least one item.

### Returns

**Promise\<*Prop\[]*>**

A Promise that resolves to an array of `Prop` objects in the same order as the input array.
Each `Prop` object has the same shape as the return value of `component.createProp()`.

### Examples

Create multiple props at once:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const props = await component.createProps([
    {
      type: 'textContent',
      name: 'Heading',
      group: 'Content',
      defaultValue: 'Welcome to our site',
    },
    {
      type: 'textContent',
      name: 'Subheading',
      group: 'Content',
      defaultValue: 'We build things',
    },
    {
      type: 'imageAsset',
      name: 'Background Image',
      group: 'Content',
    },
    {
      type: 'link',
      name: 'CTA Link',
      group: 'Content',
      defaultValue: {
        mode: 'url',
        to: 'https://example.com/signup',
        openInNewTab: true,
      },
    },
    {
      type: 'number',
      name: 'Overlay Opacity',
      group: 'Settings',
      min: 0,
      max: 100,
      decimals: 0,
      defaultValue: 50,
    },
  ])
  console.log(props)
  /*
  [
    {
      id: 'prop_1',
      type: 'textContent',
      valueType: 'textContent',
      bindableTo: ['string', 'textContent', 'altText', 'id'],
      name: 'Heading',
      group: 'Content',
      defaultValue: 'Welcome to our site',
      tooltip: null
    },
    {
      id: 'prop_2',
      type: 'textContent',
      valueType: 'textContent',
      bindableTo: ['string', 'textContent', 'altText', 'id'],
      name: 'Subheading',
      group: 'Content',
      defaultValue: 'We build things',
      tooltip: null
    },
    {
      id: 'prop_3',
      type: 'imageAsset',
      valueType: 'imageAsset',
      bindableTo: ['image'],
      name: 'Background Image',
      group: 'Content',
      defaultValue: null,
      tooltip: null
    },
    {
      id: 'prop_4',
      type: 'link',
      valueType: 'link',
      bindableTo: ['link'],
      name: 'CTA Link',
      group: 'Content',
      defaultValue: {
        mode: 'url',
        to: 'https://example.com/signup',
        openInNewTab: true
      },
      tooltip: null
    },
    {
      id: 'prop_5',
      type: 'number',
      valueType: 'number',
      bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
      name: 'Overlay Opacity',
      group: 'Settings',
      defaultValue: 50,
      tooltip: null,
      min: 0,
      max: 100,
      decimals: 0
    }
  ]
  */
}
```

Name conflicts auto-increment within the batch:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const props = await component.createProps([
    { type: 'textContent', name: 'Heading', group: 'Content' },
    { type: 'textContent', name: 'Heading', group: 'Content' },
  ])
  console.log(props[0].name) // 'Heading'
  console.log(props[1].name) // 'Heading 2'
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability        | Permission | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :--------- | :----- | :----- | :------- | :------- |
| **canModifyComponents** | any        | any    | any    | Canvas   | Design   |