From 55ecf202a6e8639851f0fa1de1b849e182a4d456 Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Wed, 25 Mar 2026 17:02:51 -0400
Subject: [PATCH] DEVREL-2721: Set selected variant

---
 src/components/PermissionsMap.tsx             |  1 +
 .../components.d.ts                           | 27 +++++++++++++++++++
 src/examples/components.ts                    |  7 +++++
 3 files changed, 35 insertions(+)

diff --git a/src/components/PermissionsMap.tsx b/src/components/PermissionsMap.tsx
index c08300a..77d007c 100644
--- a/src/components/PermissionsMap.tsx
+++ b/src/components/PermissionsMap.tsx
@@ -57,6 +57,7 @@ export const permissionsMap: PermissionsMap = {
     getVariants: { permissions: ['canAccessCanvas'] },
     getSelectedVariant: { permissions: ['canAccessCanvas'] },
     enterComponent: { permissions: ['canModifyComponents'] },
+    setSelectedVariant: { permissions: ['canModifyComponents'] },
     openCanvas: { permissions: ['canModifyComponents'] },
     selectComponent: { permissions: ['canModifyComponents'] },
     exitComponent: { permissions: ['canAccessCanvas'] },
diff --git a/src/designer-extension-typings/components.d.ts b/src/designer-extension-typings/components.d.ts
index 1d047df..94ab52a 100644
--- a/src/designer-extension-typings/components.d.ts
+++ b/src/designer-extension-typings/components.d.ts
@@ -1,3 +1,12 @@
+interface SetSelectedVariantByName {
+  name: string;
+}
+interface SetSelectedVariantById {
+  id: string;
+}
+
+type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;
+
 interface Component {
   readonly [brand]: 'Component';
 
@@ -70,6 +79,24 @@ interface Component {
    * ```
    */
   getSelectedVariant(): Promise<Variant>;
+  /**
+   * Selects the specified variant of a selected component when the component canvas is open.
+   * @returns A promise that resolves when the specified variant is selected.
+   * @example
+   * ```typescript
+   * interface SetSelectedVariantByName {
+   *   name: string;
+   * }
+   * interface SetSelectedVariantById {
+   *   id: string;
+   * }
+   *
+   * type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;
+   *
+   * setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;
+   * ```
+   */
+  setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;
   getRootElement(): Promise<null | AnyElement>;
 }
 
diff --git a/src/examples/components.ts b/src/examples/components.ts
index 1576f22..c3c2a0a 100644
--- a/src/examples/components.ts
+++ b/src/examples/components.ts
@@ -109,6 +109,13 @@ export const Components = {
     */
   },
 
+  setSelectedVariant: async () => {
+    const heroComponent = await webflow.getComponentByName('Hero');
+    if (heroComponent) {
+      await heroComponent.setSelectedVariant({ id: 'base' });
+    }
+  },
+
   createComponent: async () => {
     // Get selected element
     const rootElement = await webflow.getSelectedElement()