Changelog

1
// Fetch a component by name only
2
const heroSection = await webflow.getComponentByName('Hero');
3
console.log(heroSection.id);
4
5
// Fetch a component scoped to a group
6
const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
7
console.log(marketingHero.id);

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

1
const selectedVariant = await heroComponent.getSelectedVariant();
2
/*
3
{
4
  id: 'variant-123',
5
  name: 'Secondary Hero',
6
  isSelected: true,
7
}
8
*/
9
// When no variant is explicitly selected, returns base
10
const base = await heroComponent.getSelectedVariant();
11
/*
12
{
13
  id: 'base',
14
  name: 'Primary',
15
  isSelected: true,
16
}
17
*/