> This page is for Home.

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

# Updates to components API

> Updates to the Designer components API

These new and updated functions are now available in the Designer API:

* [`webflow.getComponentByName(name)`](/designer/reference/get-component-by-name): Get a component by its name and optionally its group (Beta)
* [`component.getVariants()`](/designer/reference/get-variants): Get all variants of a component (Beta)
* [`component.getSelectedVariant()`](/designer/reference/get-selected-variant): Get all variants of a component (Beta)

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

## Retrieving a component by name

You can now retrieve a component by its name and optionally its group with the new `webflow.getComponentByName()` function (Beta):

```typescript
// Fetch a component by name only
const heroSection = await webflow.getComponentByName('Hero');
console.log(heroSection.id);

// Fetch a component scoped to a group
const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
console.log(marketingHero.id);
```

For more information, see [Get component by name (Beta)](/designer/reference/get-component-by-name).

## Getting component variants

The new functions `component.getVariants()` and `component.getSelectedVariant()` get the variants of a component and the selected variant of a component, as in these examples:

```typescript
const component = (await webflow.getAllComponents())[0];
const variants = await component.getVariants();
console.log(variants);
// [
//   { id: 'base', name: 'Primary', isSelected: true },
//   { id: 'xxxx', name: 'Secondary', isSelected: false },
// ]
// Find which variant the user is currently editing
const activeVariant = variants.find(v => v.isSelected);
console.log(`Currently editing: ${activeVariant?.name}`);
```

```typescript
const selectedVariant = await heroComponent.getSelectedVariant();
/*
{
  id: 'variant-123',
  name: 'Secondary Hero',
  isSelected: true,
}
*/
// When no variant is explicitly selected, returns base
const base = await heroComponent.getSelectedVariant();
/*
{
  id: 'base',
  name: 'Primary',
  isSelected: true,
}
*/
```

For more information, see:

* [`Get all variants of a component`](/designer/reference/get-variants): Get all variants of a component
* [`Get selected variant`](/designer/reference/get-selected-variant): Get all variants of a component