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

# Get props (Beta)

> Returns all prop definitions on a component

## `component.getProps()`

Returns all prop definitions on a component in props panel display order.

This method returns prop *definitions*: the schema for each prop including its type, name, group, and default value.
To get the current prop *values* that are set on a component instance, use [`element.getProps()`](/designer/reference/component-element/getProps).

The response includes all prop types, including types that cannot be created via the API at this time (`variant`, `slot`, `booleanFilter`, `visibility`, `filter`, `sort`, `selectedItems`).
For components with no props, the response is an empty array.

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

### Syntax

```typescript
component.getProps(): Promise<Prop[]>
```

### Returns

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

A Promise that resolves to an array of `Prop` objects in props panel display order: ungrouped props first, then groups in order.

The `Prop` interface uses the same shape as the return value of [`component.createProp()`](/designer/reference/managing-components/create-prop):

```typescript
interface Prop {
  /** Unique prop ID. */
  id: string;
  /** The prop type. */
  type: PropType;
  /** The binding value type, derived from the prop type. */
  valueType: BindableValueType;
  /** Value types that this prop can bind to. */
  bindableTo: readonly BindableValueType[];
  /** Display name. */
  name: string;
  /** Group name, or null if ungrouped. */
  group: string | null;
  /** Tooltip text, or null if not set. */
  tooltip: string | null;
  /** Default value, or null if not set. */
  defaultValue: unknown | null;
  // Type-specific settings, included when applicable:
  multiline?: boolean;   // textContent
  min?: number;          // number
  max?: number;          // number
  decimals?: number;     // number
  trueLabel?: string;    // boolean
  falseLabel?: string;   // boolean
}
```

#### `valueType` and `bindableTo` for read-only prop types

For information about prop types, see [Create a prop](/designer/reference/managing-components/create-prop).
The following table covers the additional types returned by `getProps()`:

| `type`          | `valueType`     | `bindableTo`        |
| :-------------- | :-------------- | :------------------ |
| `variant`       | `variant`       | `['variant']`       |
| `slot`          | `slot`          | `[]`                |
| `booleanFilter` | `booleanFilter` | `['booleanFilter']` |
| `visibility`    | `visibility`    | `['visibility']`    |
| `filter`        | `filter`        | `['filter']`        |
| `sort`          | `sort`          | `['sort']`          |
| `selectedItems` | `selectedItems` | `['selectedItems']` |

### Example

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

if (component) {
  const props = await component.getProps()
  console.log(props)
  /*
  [
    {
      id: 'prop_1',
      type: 'textContent',
      valueType: 'textContent',
      bindableTo: ['string', 'textContent', 'altText', 'id'],
      name: 'Heading',
      group: 'Content',
      tooltip: 'The main heading displayed in the hero section',
      defaultValue: 'Welcome to our site'
    },
    {
      id: 'prop_2',
      type: 'imageAsset',
      valueType: 'imageAsset',
      bindableTo: ['image'],
      name: 'Background Image',
      group: 'Content',
      tooltip: null,
      defaultValue: null
    },
    {
      id: 'prop_3',
      type: 'link',
      valueType: 'link',
      bindableTo: ['link'],
      name: 'CTA Link',
      group: 'Content',
      tooltip: null,
      defaultValue: {
        mode: 'url',
        to: 'https://example.com/signup',
        openInNewTab: true
      }
    },
    {
      id: 'prop_4',
      type: 'number',
      valueType: 'number',
      bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
      name: 'Overlay Opacity',
      group: 'Settings',
      tooltip: null,
      defaultValue: 50,
      min: 0,
      max: 100,
      decimals: 0
    },
    {
      id: 'prop_5',
      type: 'boolean',
      valueType: 'boolean',
      bindableTo: ['boolean', 'string', 'altText', 'id'],
      name: 'Show CTA',
      group: 'Settings',
      tooltip: 'Toggle the call-to-action button',
      defaultValue: true,
      trueLabel: 'Visible',
      falseLabel: 'Hidden'
    },
    {
      id: 'prop_6',
      type: 'variant',
      valueType: 'variant',
      bindableTo: ['variant'],
      name: 'Color Scheme',
      group: null,
      tooltip: null,
      defaultValue: 'dark'
    },
    {
      id: 'prop_7',
      type: 'slot',
      valueType: 'slot',
      bindableTo: [],
      name: 'Footer Content',
      group: null,
      tooltip: null,
      defaultValue: null
    }
  ]
  */

  // Components with no props return an empty array
  const blankComponent = await webflow.getComponentByName('Empty Component')
  const emptyProps = await blankComponent?.getProps()
  console.log(emptyProps) // []
}
```

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

### Designer Ability

Checks for authorization only.

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