Changelog

March 17, 2026

Updates to components API

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

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):

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

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:

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}`);
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: