For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
      • Get all components
      • Get component by name
      • Get component by ID
      • Search for components
      • Get the selected component
      • Get all variants of a component
      • Get selected variant
      • Get a variant by ID
      • Create a variant
      • Set variant settings
      • Reorder variants
      • Delete a variant
      • Get component instance count
      • Create a component
      • Delete a component
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • component.getVariants()
  • Syntax
  • Returns
  • Example
  • Designer Ability
ComponentsCreating & Retrieving Components

Get all variants of a component (Beta)

Was this page helpful?
Previous

Get selected variant (Beta)

Next
Built with

component.getVariants()

Retrieves all variants of a component.

Beta

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

Syntax

1component.getVariants(): Promise<Variant[]>

Returns

Promise<Array<Variant>>

A promise that returns an array of variants.

Example

1const component = (await webflow.getAllComponents())[0];
2const variants = await component.getVariants();
3console.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
9const activeVariant = variants.find(v => v.isSelected);
10console.log(`Currently editing: ${activeVariant?.name}`);

Try this example

Designer Ability

Checks for authorization only

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canAccessCanvasanyanyanyanyany