ComponentsCreating & Retrieving Components

Create a variant (Beta)

component.createVariant(options)

component.createVariant(options, sourceVariantId)

Creates a variant of an existing component or duplicates an existing variant.

If a variant with the given name already exists, the name is automatically incremented (for example, 'Variant' becomes 'Variant 2').

Beta

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

Syntax

interface CreateVariantOptions {
  /** The name for the new variant (required) */
  name: string;
  /** Whether to select this variant after creation (optional, defaults to false) */
  isSelected?: boolean;
}

To create a variant, pass the options for the variant, including its name and whether to select it automatically:

component.createVariant(options: CreateVariantOptions): Promise<Variant>

To duplicate an existing variant, add the ID of the variant to duplicate as the second parameter:

component.createVariant(options: CreateVariantOptions, sourceVariantId: string): Promise<Variant>

Parameters

  • options : CreateVariantOptions — An object specifying the new variant’s settings:

    • name: string — The name for the new variant.
    • isSelected: Boolean — (optional) Whether to select this variant immediately after creation. Defaults to false.

  • sourceVariantId: string — The ID of the variant to duplicate.

Returns

Promise<Variant>

A Promise that resolves to the newly created Variant object.

PropertyTypeDescription
idstringThe unique identifier of the new variant.
namestringThe name of the new variant (may differ if auto-incremented).
isSelectedbooleanWhether this variant is currently selected in the Designer.

Example

Create a variant:

const component = await webflow.getCurrentComponent()
if (component) {
  // Create a variant and select it immediately
  const variant = await component.createVariant({
    name: 'Secondary Hero',
    isSelected: true,
  })
  console.log(variant)
  // { id: 'variant-123', name: 'Secondary Hero', isSelected: true }
  // Name conflicts auto-increment
  const variant2 = await component.createVariant({ name: 'Secondary Hero' })
  console.log(variant2.name) // 'Secondary Hero 2'
}
// Name auto-increments on conflict
const variant2 = await component.createVariant({ name: 'Secondary Hero' });
console.log(variant2.name); // 'Secondary Hero 2'

Duplicate a variant:

const component = await webflow.getCurrentComponent()
if (component) {
  // Get the selected variant or the base variant as default
  const selectedVariant = await component.getSelectedVariant()
  // Duplicate the selected variant
  const duplicateVariant = await component.createVariant({
    name: 'Duplicate of Secondary Hero',
    isSelected: true,
  }, selectedVariant.id)
  console.log(duplicateVariant.name) // 'Duplicate of Secondary Hero'
}

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign