@webflow/designer-extension-typings 0.2.0-beta.1 → 0.2.0-beta.2

package/api.d.ts

@@ -0,0 +1,371 @@
+/// <reference path="./brand.d.ts" />
+/// <reference path="./styles.d.ts" />
+/// <reference path="./pages.d.ts" />
+/// <reference path="./elements.d.ts" />
+/// <reference path="./element-presets.d.ts" />
+/// <reference path="./components.d.ts" />
+/// <reference path="./variables.d.ts" />
+
+interface WebflowApi {
+  /**
+   * Get metadata about the current Site.
+   * @returns A Promise that resolves to a record containing information about the site that is open in the
+   * Designer, with the following properties:
+   * - siteId: the unique ID of the current Webflow site.
+   * - siteName: the name of the current Webflow site.
+   * - shortName: a shortened reference to the name of the current Webflow site.
+   * @example
+   * ```ts
+   * const siteInfo = await webflow.getSiteInfo();
+   * console.log('Site ID:', siteInfo.siteId);
+   * console.log('Site Name:', siteInfo.siteName);
+   * console.log('Shortened Site Name:', siteInfo.shortName);
+   * ```
+   */
+  getSiteInfo(): Promise<{siteId: string; siteName: string; shortName: string}>;
+  /**
+   * Get the currently selected element in the Webflow designer.
+   * @returns A promise that resolves to one of the following:
+   * - null: If no element is currently selected in the designer
+   * - AnyElement: an object representing the selected element, which can be of any type.
+   * @example
+   * ```ts
+   * const selectedElement = await webflow.getSelectedElement();
+   * if (selectedElement) {
+   *   // Handle the selected element
+   * } else {
+   *   // No element is currently selected
+   * }
+   * ```
+   */
+  getSelectedElement(): Promise<null | AnyElement>;
+  /**
+   * Get the current media query breakpoint ID.
+   * @returns A Promise that resolves to a BreakpointId which is a string representing the current media query
+   * breakpoint. A BreakpointId is one of 'tiny', 'small', 'medium', 'main', 'large', 'xl', 'xxl'.
+   * @example
+   * ```ts
+   * const breakpoint = await webflow.getMediaQuery();
+   * console.log('Current Media Query:', breakpoint);
+   * ```
+   */
+  getMediaQuery(): Promise<BreakpointId>;
+  /**
+   * Create a component by promoting a Root Element.
+   * @param name - The name of the component.
+   * @param rootElement - An Element that will become the Root Element of the Component.
+   * @returns A Promise resolving to an object containing the newly created Component - with the id property.
+   * @example
+   * ```ts
+   * const element = webflow.createDOM('div')
+   * await webflow.registerComponent('Hero-Component', element)
+   *
+   * // Example Response
+   * {id: '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2'}
+   * ```
+   */
+  registerComponent(
+    name: string,
+    root: AnyElement | ElementPreset<AnyElement> | Component
+  ): Promise<Component>;
+  /**
+   * Delete a component from the Designer. If there are any instances of the Component within the site, they will
+   * be converted to regular Elements.
+   * @param component -  The component object you wish to delete.
+   * @returns A Promise resolving that resolves when the Component is deleted.
+   * @example
+   * ```ts
+   * const element = webflow.createDOM('div')
+   * const heroComponent = await webflow.registerComponent('Hero-Component', element)
+   * await webflow.unregisterComponent(heroComponent)
+   * ```
+   */
+  unregisterComponent(component: Component): Promise<null>;
+  /**
+   * Fetch all Site-scoped components definitions. In order to edit a component, you’ll need to get a specific
+   * Component instance.
+   * @returns A Promise resolving to an array containing all Components from the currently open site in the
+   * Designer - with the id property.
+   * @example
+   * ```ts
+   *  const fetchedComponents = await webflow.getAllComponents();
+   *
+   * // Example Response
+   * [
+   * {id: "4a669354-353a-97eb-795c-4471b406e043"}
+   * {id: 'd6e076e2-19a2-c4ae-9da3-ce3b0493b503'}
+   * ]
+   * ```
+   */
+  getAllComponents(): Promise<Array<Component>>;
+  /**
+   * Focus the designer on a Component. When a component is in focus, all Globals pertain specifically to that
+   * Component, not the entire Site.
+   * @param instance - A Component Instance that is present on the page. If there’s no current instance, you’ll
+   * need to create one first.
+   * @returns A Promise that resolves when the page switch is successful.
+   * @example
+   * ```ts
+   * await webflow.enterComponent(heroComponentInstance);
+   * ```
+   */
+  enterComponent(instance: ComponentElement): Promise<null>;
+  /**
+   * Return to the broader context of the entire site or page.
+   * @returns A Promise that resolves when the page switch is successful.
+   * @example
+   * ```ts
+   * await webflow.exitComponent();
+   * ```
+   */
+  exitComponent(): Promise<null>;
+  /**
+   * Get Root element. When the designer is focused or "entered" into a Component, this method will get the
+   * outermost element in the Component.
+   * @returns The outermost element of the Page or Component.
+   * @example
+   * ```ts
+   * // 🎉 Enter into  Component 🎉
+   * await webflow.enterComponent(heroComponentInstance)
+   * const root = await webflow.getRootElement()
+   *
+   * // Example Response
+   * {id: '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2'}
+   * ```
+   */
+  getRootElement(): Promise<null | AnyElement>;
+  /**
+   * Fetch an array of all elements present on the current page of the Designer. If the Designer is editing a
+   * component, the elements returned are those present in that Component.
+   * @returns A Promise that resolves to an array of AnyElement objects. AnyElement represents various element
+   * types available in a Webflow project. Each element type corresponds to different types of HTML elements or
+   * components that can be used within the designer. You can see a full list of supported elements in our
+   * designer extensions typing file.
+   * @example
+   * ```ts
+   * const allElements = await webflow.getAllElements()
+   * const paragraphs = allElements.flatMap(el => el.type === 'Paragraph' ? [el] : [])
+   * paragraphs.forEach(el => {
+   *   el.setTextContent('Hello')
+   *   el.save()
+   * })
+   * ```
+   */
+  getAllElements(): Promise<Array<AnyElement>>;
+
+  /**
+   * Creates a new style with the provided name.
+   * @param name - The name for the new style.
+   * @returns a Promise that resolves to the Style object representing the newly created style.
+   * @example
+   * ```ts
+   * const newStyle = await webflow.createStyle('myNewStyle');
+   * ```
+   */
+  createStyle(name: string): Promise<Style>;
+  /**
+   * Fetch a style by its name.
+   * @param name - The name of the style to retrieve.
+   * @returns A Promise that resolves to one of the following:
+   * - null if no style with the given name is found.
+   * - Style object representing the style with the specified name.
+   * @example
+   * ```ts
+   * const styleName = 'myStyle';
+   * const style = await webflow.getStyleByName(styleName);
+   * if (style) {
+   *   // Style found, handle it
+   * } else {
+   *   // Style not found
+   * }
+   * ```
+   */
+  getStyleByName(name: string): Promise<null | Style>;
+  /**
+   * Fetch an array of all styles available in the Webflow project.
+   * @returns A Promise that resolves to an array of Style objects representing all the styles present on the
+   * site that is open in the Designer.
+   * @example
+   * ```ts
+   * const allStyles = await webflow.getAllStyles();
+   * allStyles.forEach((style) => {
+   *   // Process each style
+   * });
+   * ```
+   */
+  getAllStyles(): Promise<Array<Style>>;
+  /**
+   * Fetch the currently active page in the Webflow designer.
+   * @returns A Promise that resolves to a Page object representing the current page open in the Designer.
+   * @example
+   * ```ts
+   * const currentPage = await webflow.getCurrentPage();
+   * console.log('Current Page:', currentPage);
+   * ```
+   */
+  getCurrentPage(): Promise<Page>;
+  /**
+   * Fetch an array of all pages and folders in the Webflow project.
+   * @returns A Promise that resolves to an array of Page and Folder objects representing all the pages
+   * and folders of the site that is open in the Designer.
+   * @example
+   * ```ts
+   * const items = await webflow.getAllPagesAndFolders();
+   * items.forEach((item) => {
+   *   // Process each page or folder
+   * });
+   * ```
+   */
+  getAllPagesAndFolders(): Promise<Array<Page | Folder>>;
+  /**
+   * Create a new page folder within the current Webflow project.
+   * @returns A Promise that resolves to a Folder object representing a newly created folder for the site open in
+   * the Designer.
+   * @example
+   * ```ts
+   * const newFolder = await webflow.createPageFolder();
+   * // Handle the new folder
+   * ```
+   */
+  createPageFolder(): Promise<Folder>;
+  /**
+   * Create a new Page within the current Webflow project.
+   * @returns A Promise that resolves to a Page object representing a newly created page for the site open in the Designer.
+   * @example
+   * ```ts
+   * const newPage = await webflow.createPage();
+   * // Handle the new page
+   * ```
+   */
+  createPage(): Promise<Page>;
+  /**
+   * @param page - The Page object representing the target page to switch to.
+   * @returns A Promise that resolves when the page switch is successful.
+   * @example
+   * ```ts
+   * const targetPage = <Get the target page>;
+   * await webflow.switchPage(targetPage);
+   * // Page switched successfully
+   * ```
+   */
+  switchPage(page: Page): Promise<void>;
+  /**
+   * Access the default variable collection.
+   * @returns A Promise that resolves into a Collection.
+   * @example
+   * ```ts
+   * const collection = webflow.getDefaultVariableCollection();
+   * // This collection object can now be used to create variables or access variables within it
+   * const variable = collection.getVariableByName('Space Cadet');
+   * ```
+   */
+  getDefaultVariableCollection(): Promise<null | VariableCollection>;
+  /**
+   * Sets the extension size to one of predefined sizes or a custom size. If the specified custom size is larger than
+   * the user's viewport size, the extension will default to the width/height of the browser's viewport.
+   * @param size - The size to set the extension window to. One of 'default', 'comfortable', 'large', or an object
+   * containing width and height keys.
+   * @example
+   * ```ts
+   * await webflow.setExtensionSize("large") ;
+   * // Perform actions for large window
+   *
+   * await webflow.setExtensionSize({width: 1000, height: 700}) ;
+   * //Perform actions for this window size
+   * ```
+   */
+  setExtensionSize(
+    size: 'default' | 'comfortable' | 'large' | {width: number; height: number}
+  ): Promise<null>;
+  /**
+   * Notifies the user with a message using a specific style. Error messages provide user's with the opportunity to
+   * close the Designer Extension.
+   * @param opts - An object containing the following notification options:
+   * - type: The type of notification to display. One of 'Error', 'Info', 'Success'.
+   * - message: The message to display in the notification.
+   * @returns A Promise that resolves when the notification is displayed to the user.
+   * @example
+   * ```ts
+   * webflow.notify({ type: 'Info', message: 'Great work!' }); // General notification
+   * webflow.notify({ type: 'Error', message: 'Something went wrong, try again!' }); // Error notification
+   * webflow.notify({ type: 'Success', message: 'Successfully did something!' }); // Success notification
+   * ```
+   */
+  notify(opts: {
+    type: 'Error' | 'Info' | 'Success';
+    message: string;
+  }): Promise<void>;
+  /**
+   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
+   * includes detecting a new Selected Element: You can subscribe to the 'selectedelement' event to be notified whenever a
+   * different element is selected in the Webflow designer. This is useful if you want to perform specific actions or
+   * updates based on the currently selected element. A null element signifies that no element is selected.
+   * @param event - The name of the event to subscribe to, specifically 'selectedelement'.
+   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
+   * parameters passed to the callback depend on the event.
+   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
+   * @example
+   * ```ts
+   * // Subscribe to changes in the selected element
+   * const selectedElementCallback = (element) => {
+   *   if (element) {
+   *     console.log('Selected Element:', element);
+   *   } else {
+   *     console.log('No element is currently selected.');
+   *   }
+   * };
+   *
+   * const unsubscribeSelectedElement = webflow.subscribe('selectedelement', selectedElementCallback);
+   * ```
+   */
+  subscribe(
+    event: 'selectedelement',
+    callback: (element: null | AnyElement) => void
+  ): Unsubscribe;
+  /**
+   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
+   * includes detecting a Breakpoint Change: Use the ‘mediaquery’ event to stay informed as the designer switches between
+   * breakpoints for desktops, tablets, or smartphones.
+   * @param event - The name of the event to subscribe to, specifically 'mediaquery'.
+   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
+   * parameters passed to the callback depend on the event.
+   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
+   * @example
+   * ```ts
+   * // Subscribe to changes in the media query breakpoint
+   * const mediaQueryCallback = (breakpoint) => {
+   *   console.log('Media Query Breakpoint:', breakpoint);
+   * };
+   *
+   * const unsubscribeMediaQuery = webflow.subscribe('mediaquery', mediaQueryCallback);
+   * ```
+   */
+  subscribe(
+    event: 'mediaquery',
+    callback: (breakpoint: BreakpointId) => void
+  ): Unsubscribe;
+  /**
+   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
+   * includes detecting a Page Change: The 'currentpage' event allows you to respond when the user switches to a different
+   * page in the Webflow designer. This can be handy if you want to load additional data or perform actions
+   * specific to the selected page.
+   * @param event - The name of the event to subscribe to, specifically 'currentpage'.
+   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
+   * parameters passed to the callback depend on the event.
+   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
+   * @example
+   * ```ts
+   * // Subscribe to changes in the currently active page
+   * const currentPageCallback = (page) => {
+   *   console.log('Current Page:', page);
+   * };
+   *
+   * const unsubscribeCurrentPage = webflow.subscribe('currentpage', currentPageCallback);
+   * ```
+   */
+  subscribe(event: 'currentpage', callback: (page: Page) => void): Unsubscribe;
+  getIdToken(): Promise<string>;
+  elementPresets: ElementPresets;
+}
+
+type Unsubscribe = () => void;

package/components.d.ts

@@ -30,7 +30,7 @@ interface Component {
    * await component.setName("She-ro Component")
    * ```
    */
-  setName(name: string): Promise<undefined>;
+  setName(name: string): Promise<void>;
   getRootElement(): Promise<null | AnyElement>;
 }
 

package/index.d.ts

@@ -1,425 +1,7 @@
-/// <reference path="./brand.d.ts" />
-/// <reference path="./styles.d.ts" />
-/// <reference path="./pages.d.ts" />
-/// <reference path="./elements.d.ts" />
-/// <reference path="./element-presets.d.ts" />
-/// <reference path="./components.d.ts" />
-/// <reference path="./variables.d.ts" />
+/// <reference path="./api.d.ts" />
 
 declare global {
   const webflow: WebflowApi;
 }
 
-interface WebflowApi {
-  /**
-   * Get metadata about the current Site.
-   * @returns A Promise that resolves to a record containing information about the site that is open in the
-   * Designer, with the following properties:
-   * - siteId: the unique ID of the current Webflow site.
-   * - siteName: the name of the current Webflow site.
-   * - shortName: a shortened reference to the name of the current Webflow site.
-   * @example
-   * ```ts
-   * const siteInfo = await webflow.getSiteInfo();
-   * console.log('Site ID:', siteInfo.siteId);
-   * console.log('Site Name:', siteInfo.siteName);
-   * console.log('Shortened Site Name:', siteInfo.shortName);
-   * ```
-   */
-  getSiteInfo(): Promise<{siteId: string; siteName: string; shortName: string}>;
-  /**
-   * Get the currently selected element in the Webflow designer.
-   * @returns A promise that resolves to one of the following:
-   * - null: If no element is currently selected in the designer
-   * - AnyElement: an object representing the selected element, which can be of any type.
-   * @example
-   * ```ts
-   * const selectedElement = await webflow.getSelectedElement();
-   * if (selectedElement) {
-   *   // Handle the selected element
-   * } else {
-   *   // No element is currently selected
-   * }
-   * ```
-   */
-  getSelectedElement(): Promise<null | AnyElement>;
-  /**
-   * Get the current media query breakpoint ID.
-   * @returns A Promise that resolves to a BreakpointId which is a string representing the current media query
-   * breakpoint. A BreakpointId is one of 'tiny', 'small', 'medium', 'main', 'large', 'xl', 'xxl'.
-   * @example
-   * ```ts
-   * const breakpoint = await webflow.getMediaQuery();
-   * console.log('Current Media Query:', breakpoint);
-   * ```
-   */
-  getMediaQuery(): Promise<BreakpointId>;
-  /**
-   * Create a component by promoting a Root Element.
-   * @param name - The name of the component.
-   * @param rootElement - An Element that will become the Root Element of the Component.
-   * @returns A Promise resolving to an object containing the newly created Component - with the id property.
-   * @example
-   * ```ts
-   * const element = webflow.createDOM('div')
-   * await webflow.registerComponent('Hero-Component', element)
-   *
-   * // Example Response
-   * {id: '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2'}
-   * ```
-   */
-  registerComponent(
-    name: string,
-    root: AnyElement | ElementPreset<AnyElement> | Component
-  ): Promise<Component>;
-  /**
-   * Delete a component from the Designer. If there are any instances of the Component within the site, they will
-   * be converted to regular Elements.
-   * @param component -  The component object you wish to delete.
-   * @returns A Promise resolving that resolves when the Component is deleted.
-   * @example
-   * ```ts
-   * const element = webflow.createDOM('div')
-   * const heroComponent = await webflow.registerComponent('Hero-Component', element)
-   * await webflow.unregisterComponent(heroComponent)
-   * ```
-   */
-  unregisterComponent(component: Component): Promise<null>;
-  /**
-   * Fetch all Site-scoped components definitions. In order to edit a component, you’ll need to get a specific
-   * Component instance.
-   * @returns A Promise resolving to an array containing all Components from the currently open site in the
-   * Designer - with the id property.
-   * @example
-   * ```ts
-   *  const fetchedComponents = await webflow.getAllComponents();
-   *
-   * // Example Response
-   * [
-   * {id: "4a669354-353a-97eb-795c-4471b406e043"}
-   * {id: 'd6e076e2-19a2-c4ae-9da3-ce3b0493b503'}
-   * ]
-   * ```
-   */
-  getAllComponents(): Promise<Array<Component>>;
-  /**
-   * Focus the designer on a Component. When a component is in focus, all Globals pertain specifically to that
-   * Component, not the entire Site.
-   * @param instance - A Component Instance that is present on the page. If there’s no current instance, you’ll
-   * need to create one first.
-   * @returns A Promise that resolves when the page switch is successful.
-   * @example
-   * ```ts
-   * await webflow.enterComponent(heroComponentInstance);
-   * ```
-   */
-  enterComponent(instance: ComponentElement): Promise<null>;
-  /**
-   * Return to the broader context of the entire site or page.
-   * @returns A Promise that resolves when the page switch is successful.
-   * @example
-   * ```ts
-   * await webflow.exitComponent();
-   * ```
-   */
-  exitComponent(): Promise<null>;
-  /**
-   * Get Root element. When the designer is focused or "entered" into a Component, this method will get the
-   * outermost element in the Component.
-   * @returns The outermost element of the Page or Component.
-   * @example
-   * ```ts
-   * // 🎉 Enter into  Component 🎉
-   * await webflow.enterComponent(heroComponentInstance)
-   * const root = await webflow.getRootElement()
-   *
-   * // Example Response
-   * {id: '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2'}
-   * ```
-   */
-  getRootElement(): Promise<null | AnyElement>;
-  /**
-   * Fetch an array of all elements present on the current page of the Designer. If the Designer is editing a
-   * component, the elements returned are those present in that Component.
-   * @returns A Promise that resolves to an array of AnyElement objects. AnyElement represents various element
-   * types available in a Webflow project. Each element type corresponds to different types of HTML elements or
-   * components that can be used within the designer. You can see a full list of supported elements in our
-   * designer extensions typing file.
-   * @example
-   * ```ts
-   * const allElements = await webflow.getAllElements()
-   * const paragraphs = allElements.flatMap(el => el.type === 'Paragraph' ? [el] : [])
-   * paragraphs.forEach(el => {
-   *   el.setTextContent('Hello')
-   *   el.save()
-   * })
-   * ```
-   */
-  getAllElements(): Promise<Array<AnyElement>>;
-
-  /**
-   * Creates a new style with the provided name.
-   * @param name - The name for the new style.
-   * @returns a Promise that resolves to the Style object representing the newly created style.
-   * @example
-   * ```ts
-   * const newStyle = await webflow.createStyle('myNewStyle');
-   * ```
-   */
-  createStyle(name: string): Promise<Style>;
-  /**
-   * Fetch a style by its name.
-   * @param name - The name of the style to retrieve.
-   * @returns A Promise that resolves to one of the following:
-   * - null if no style with the given name is found.
-   * - Style object representing the style with the specified name.
-   * @example
-   * ```ts
-   * const styleName = 'myStyle';
-   * const style = await webflow.getStyleByName(styleName);
-   * if (style) {
-   *   // Style found, handle it
-   * } else {
-   *   // Style not found
-   * }
-   * ```
-   */
-  getStyleByName(name: string): Promise<null | Style>;
-  /**
-   * Fetch an array of all styles available in the Webflow project.
-   * @returns A Promise that resolves to an array of Style objects representing all the styles present on the
-   * site that is open in the Designer.
-   * @example
-   * ```ts
-   * const allStyles = await webflow.getAllStyles();
-   * allStyles.forEach((style) => {
-   *   // Process each style
-   * });
-   * ```
-   */
-  getAllStyles(): Promise<Array<Style>>;
-  /**
-   * Fetch the currently active page in the Webflow designer.
-   * @returns A Promise that resolves to a Page object representing the current page open in the Designer.
-   * @example
-   * ```ts
-   * const currentPage = await webflow.getCurrentPage();
-   * console.log('Current Page:', currentPage);
-   * ```
-   */
-  getCurrentPage(): Promise<Page>;
-  /**
-   * Fetch an array of all pages and folders in the Webflow project.
-   * @returns A Promise that resolves to an array of Page and Folder objects representing all the pages
-   * and folders of the site that is open in the Designer.
-   * @example
-   * ```ts
-   * const items = await webflow.getAllPagesAndFolders();
-   * items.forEach((item) => {
-   *   // Process each page or folder
-   * });
-   * ```
-   */
-  getAllPagesAndFolders(): Promise<Array<Page | Folder>>;
-  /**
-   * Create a new folder within the current Webflow project.
-   * @returns A Promise that resolves to a Folder object representing a newly created folder for the site open in
-   * the Designer.
-   * @example
-   * ```ts
-   * const newFolder = await webflow.createFolder();
-   * // Handle the new folder
-   * ```
-   */
-  createFolder(): Promise<Folder>;
-  /**
-   * Create a new Page within the current Webflow project.
-   * @returns A Promise that resolves to a Page object representing a newly created page for the site open in the Designer.
-   * @example
-   * ```ts
-   * const newPage = await webflow.createPage();
-   * // Handle the new page
-   * ```
-   */
-  createPage(): Promise<Page>;
-  /**
-   * @param page - The Page object representing the target page to switch to.
-   * @returns A Promise that resolves when the page switch is successful.
-   * @example
-   * ```ts
-   * const targetPage = <Get the target page>;
-   * await webflow.switchPage(targetPage);
-   * // Page switched successfully
-   * ```
-   */
-  switchPage(page: Page): Promise<void>;
-  /**
-   * Render an Instance of the Component on a page.
-   * @param component - The Component object you’d like to create an Instance of.
-   * @returns A ComponentElement object better known as a Component Instance.
-   * @example
-   * ```ts
-   * // 🎉 Create Component 🎉
-   * const element = webflow.createDOM('div')
-   * const heroComponent = await webflow.registerComponent('Hero-Component', element)
-   * // 🎉 Create Component instance 🎉
-   * const heroComponentInstance = webflow.createInstance(heroComponent);
-   * ```
-   */
-  createInstance(component: Component): ComponentElement;
-  /**
-   * Creates a new StringElement.
-   * @param text - The string you'd like to create.
-   * @returns A StringElement object representing the newly created string.
-   * @example
-   * ```ts
-   * const stringElement = webflow.createString("Hello world");
-   * // add the string to a parent element (eg. a <div>)
-   * parentElement.setChildren([stringElement]);
-   * ```
-   */
-  createString(text: string): StringElement;
-  /**
-   * Create a custom HTML element with the specified tag.
-   * @param tag - The HTML tag for the custom element.
-   * @returns A DOMElement object representing the newly created custom element.
-   * @example
-   * ```ts
-   * const newDiv = webflow.createDOM('div')
-   * // Use the newDiv object
-   * ```
-   */
-  createDOM(tag: string): DOMElement;
-  /**
-   * Creates a new heading element with the provided level (h1-h6).
-   * @param tag - (1 | 2 | 3 | 4 | 5 | 6) - The heading level for the new heading element.
-   * @returns HeadingElement object representing the new heading element.
-   * @example
-   * ```ts
-   * const newH1 = webflow.createHeading(1)
-   * // Use the newH1 object
-   * ```
-   */
-  createHeading(tag: 1 | 2 | 3 | 4 | 5 | 6): HeadingElement;
-  /**
-   * Access the default variable collection.
-   * @returns A Promise that resolves into a Collection.
-   * @example
-   * ```ts
-   * const collection = webflow.getDefaultVariableCollection();
-   * // This collection object can now be used to create variables or access variables within it
-   * const variable = collection.getVariableByName('Space Cadet');
-   * ```
-   */
-  getDefaultVariableCollection(): Promise<null | VariableCollection>;
-  /**
-   * Sets the extension size to one of predefined sizes or a custom size. If the specified custom size is larger than
-   * the user's viewport size, the extension will default to the width/height of the browser's viewport.
-   * @param size - The size to set the extension window to. One of 'default', 'comfortable', 'large', or an object
-   * containing width and height keys.
-   * @example
-   * ```ts
-   * await webflow.setExtensionSize("large") ;
-   * // Perform actions for large window
-   *
-   * await webflow.setExtensionSize({width: 1000, height: 700}) ;
-   * //Perform actions for this window size
-   * ```
-   */
-  setExtensionSize(
-    size: 'default' | 'comfortable' | 'large' | {width: number; height: number}
-  ): Promise<null>;
-  /**
-   * Notifies the user with a message using a specific style. Error messages provide user's with the opportunity to
-   * close the Designer Extension.
-   * @param opts - An object containing the following notification options:
-   * - type: The type of notification to display. One of 'Error', 'Info', 'Success'.
-   * - message: The message to display in the notification.
-   * @returns A Promise that resolves when the notification is displayed to the user.
-   * @example
-   * ```ts
-   * webflow.notify({ type: 'Info', message: 'Great work!' }); // General notification
-   * webflow.notify({ type: 'Error', message: 'Something went wrong, try again!' }); // Error notification
-   * webflow.notify({ type: 'Success', message: 'Successfully did something!' }); // Success notification
-   * ```
-   */
-  notify(opts: {
-    type: 'Error' | 'Info' | 'Success';
-    message: string;
-  }): Promise<void>;
-  /**
-   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
-   * includes detecting a new Selected Element: You can subscribe to the 'selectedelement' event to be notified whenever a
-   * different element is selected in the Webflow designer. This is useful if you want to perform specific actions or
-   * updates based on the currently selected element. A null element signifies that no element is selected.
-   * @param event - The name of the event to subscribe to, specifically 'selectedelement'.
-   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
-   * parameters passed to the callback depend on the event.
-   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
-   * @example
-   * ```ts
-   * // Subscribe to changes in the selected element
-   * const selectedElementCallback = (element) => {
-   *   if (element) {
-   *     console.log('Selected Element:', element);
-   *   } else {
-   *     console.log('No element is currently selected.');
-   *   }
-   * };
-   *
-   * const unsubscribeSelectedElement = webflow.subscribe('selectedelement', selectedElementCallback);
-   * ```
-   */
-  subscribe(
-    event: 'selectedelement',
-    callback: (element: null | AnyElement) => void
-  ): Unsubscribe;
-  /**
-   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
-   * includes detecting a Breakpoint Change: Use the ‘mediaquery’ event to stay informed as the designer switches between
-   * breakpoints for desktops, tablets, or smartphones.
-   * @param event - The name of the event to subscribe to, specifically 'mediaquery'.
-   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
-   * parameters passed to the callback depend on the event.
-   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
-   * @example
-   * ```ts
-   * // Subscribe to changes in the media query breakpoint
-   * const mediaQueryCallback = (breakpoint) => {
-   *   console.log('Media Query Breakpoint:', breakpoint);
-   * };
-   *
-   * const unsubscribeMediaQuery = webflow.subscribe('mediaquery', mediaQueryCallback);
-   * ```
-   */
-  subscribe(
-    event: 'mediaquery',
-    callback: (breakpoint: BreakpointId) => void
-  ): Unsubscribe;
-  /**
-   * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event
-   * includes detecting a Page Change: The 'currentpage' event allows you to respond when the user switches to a different
-   * page in the Webflow designer. This can be handy if you want to load additional data or perform actions
-   * specific to the selected page.
-   * @param event - The name of the event to subscribe to, specifically 'currentpage'.
-   * @param callback - A callback function that will be invoked when the subscribed event is triggered. The specific
-   * parameters passed to the callback depend on the event.
-   * @returns An Unsubscribe function that can be used to unsubscribe from the event and stop receiving notifications.
-   * @example
-   * ```ts
-   * // Subscribe to changes in the currently active page
-   * const currentPageCallback = (page) => {
-   *   console.log('Current Page:', page);
-   * };
-   *
-   * const unsubscribeCurrentPage = webflow.subscribe('currentpage', currentPageCallback);
-   * ```
-   */
-  subscribe(event: 'currentpage', callback: (page: Page) => void): Unsubscribe;
-  getIdToken(): Promise<string>;
-  elementPresets: ElementPresets;
-}
-
-type Unsubscribe = () => undefined;
-
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.2",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",

package/pages.d.ts

@@ -181,7 +181,7 @@ interface Page {
    * await myPage.setOpenGraphTitle("New OG Title");
    * ```
    */
-  setOpenGraphTitlegTitle(title: string): Promise<null>;
+  setOpenGraphTitle(title: string): Promise<null>;
   /**
    * Checks if the page uses its description as the Open Graph description.
    * @example
@@ -388,17 +388,6 @@ interface Page {
    * ```
    */
   isHomepage(): Promise<boolean>;
-  /**
-   * Retrieves the full page URL upon publish
-   * @returns A Promise that resolves to a string representing the publish URL for a Page object
-   * @example
-   * ```ts
-   * let currentPage = await webflow.getCurrentPage();
-   * let currentPageUrl = await currentPage.getPublishUrl();
-   * console.log("Publish URL for current page:", currentPageUrl);
-   * ```
-   */
-  getPublishUrl(): Promise<string>;
 }
 
 type FolderId = string;

package/styles.d.ts

@@ -34,11 +34,11 @@ interface Style {
   setProperties(
     props: PropertyMap,
     options?: BreakpointAndPseudo
-  ): Promise<undefined>;
+  ): Promise<void>;
   removeProperties(
     props: Array<StyleProperty>,
     options?: BreakpointAndPseudo
-  ): Promise<undefined>;
+  ): Promise<void>;
   /**
    * Retrieve the value of a specific property of the style.
    * @param prop - The name of the property to retrieve.
@@ -69,11 +69,11 @@ interface Style {
     prop: p,
     value: NonNullable<PropertyMap[p]>,
     options?: BreakpointAndPseudo
-  ): Promise<undefined>;
+  ): Promise<void>;
   removeProperty(
     prop: StyleProperty,
     options?: BreakpointAndPseudo
-  ): Promise<undefined>;
+  ): Promise<void>;
   /**
    * Removes all CSS properties from the Style.
    * @example
@@ -81,7 +81,7 @@ interface Style {
    * await myStyle.removeAllProperties();
    * ```
    */
-  removeAllProperties(): Promise<undefined>;
+  removeAllProperties(): Promise<void>;
 }
 
 type StyleId = string;