From 70450909deb43562f4a567c850f483a1d5733e8b Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Tue, 17 Mar 2026 16:39:53 -0400
Subject: [PATCH] DEVREL-2685: Get component by name

---
 src/components/PermissionsMap.tsx       |  2 ++
 src/designer-extension-typings/api.d.ts | 16 ++++++++++++++++
 src/examples/components.ts              | 12 ++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/src/components/PermissionsMap.tsx b/src/components/PermissionsMap.tsx
index 837beba..d07386a 100644
--- a/src/components/PermissionsMap.tsx
+++ b/src/components/PermissionsMap.tsx
@@ -51,6 +51,8 @@ export const permissionsMap: PermissionsMap = {
     registerComponent: { permissions: ['canCreateComponents'] },
     unregisterComponent: { permissions: ['canCreateComponents'] },
     getAllComponents: { permissions: ['canAccessCanvas'] },
+    getComponentByName: { permissions: ['canAccessCanvas'] },
+    getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] },
     enterComponent: { permissions: ['canModifyComponents'] },
     exitComponent: { permissions: ['canAccessCanvas'] },
   },
diff --git a/src/designer-extension-typings/api.d.ts b/src/designer-extension-typings/api.d.ts
index 0e1c2ce..d49c281 100644
--- a/src/designer-extension-typings/api.d.ts
+++ b/src/designer-extension-typings/api.d.ts
@@ -168,6 +168,22 @@ interface WebflowApi {
    * ```
    */
   getAllComponents(): Promise<Array<Component>>;
+  /**
+   * Retrieve a component based on its name and optionally its group.
+   * Component instance.
+   * @returns A Promise resolving to the component
+   * @example
+   * ```ts
+   * // 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);
+   * ```
+   */
+  getComponentByName(a: string, b?: string): Promise<Component>;
   /**
    * Focus the designer on a Component. When a component is in focus, all Globals pertain specifically to that
    * Component, not the entire Site.
diff --git a/src/examples/components.ts b/src/examples/components.ts
index 6a64903..da19b35 100644
--- a/src/examples/components.ts
+++ b/src/examples/components.ts
@@ -52,6 +52,18 @@ export const Components = {
     }
   },
 
+  getComponentByName: async () => {
+    // Fetch a component by name only
+    const heroSection = await webflow.getComponentByName('Hero');
+    console.log(heroSection.id);
+  },
+
+  getComponentByNameAndGroup: async () => {
+    // Fetch a component scoped to a group
+    const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
+    console.log(marketingHero.id);
+  },
+
   createComponent: async () => {
     // Get selected element
     const rootElement = await webflow.getSelectedElement()