> 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 component settings (Beta)

> Updates one or more settings on a component, including its name, group, and description

## `component.setSettings(settings)`

Updates one or more settings on a component.
All fields are optional; only the fields that you provide are updated.
Changes take effect immediately without requiring an explicit save.
To set only the name of a component, see [Set component name](/designer/reference/set-component-name).

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

### Syntax

```typescript
component.setSettings(settings: Partial<ComponentSettings>): Promise<null>
```

### Parameters

* **`settings`** : *Partial\<ComponentSettings>* — An object containing the fields to update.
  All fields are optional.

| Property      | Type     | Required | Description                                                          |
| :------------ | :------- | :------- | :------------------------------------------------------------------- |
| `name`        | `string` | No       | A new name for the component. Must be a non-empty string.            |
| `group`       | `string` | No       | A group for the component. Pass an empty string to remove the group. |
| `description` | `string` | No       | A description for the component. Pass an empty string to clear it.   |

### Returns

**Promise\<null>**

A Promise that resolves to `null` once the settings have been updated.

### Example

```typescript
const components = await webflow.getAllComponents();
const component = components[0];

// Update only the description
await component.setSettings({
  description: 'Updated hero layout with video background',
});

// Move to a different group
await component.setSettings({ group: 'Legacy' });

// Update all settings at once
await component.setSettings({
  name: 'Hero Section v2',
  group: 'Sections',
  description: 'Redesigned hero component',
});
```

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