> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/designer/reference/element-types-methods/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Element Types & Methods

> Learn about different element types and their specific methods in the Webflow Designer API

Each element in Webflow has a specific type that determines its functionality and available methods. While all elements share some [common properties](/designer/reference/element-properties-methods), each element type also has specialized methods that allow you to manipulate that element's unique characteristics.

## Identifying element types

You can identify an element's type using the `element.type` property:

```typescript
const element = await Webflow.getSelectedElement();
console.log(element.type); // "DOM", "String", "Image", etc.
```

## Element presets

To add a specific element type to the canvas, you can use the [`webflow.elementPresets` object](/designer/reference/element-presets), which contains a set of presets for different element types available in the designer.

```typescript
const element = await webflow.elementPresets.DOM;
await webflow.addElement(element);
```

## Element type methods

Different element types have unique methods tailored to their functionality. Always check an element's type before applying type-specific methods.

#### [DOM Elements](/designer/reference/dom-element)

Customize HTML elements with methods for HTML tags and attributes.

#### [Strings](/designer/reference/string-element)

Work with text content and manipulate their text values.

#### [Images](/designer/reference/image-element)

Manage images and alt text.

#### [Headings](/designer/reference/heading-element)

Modify heading levels and heading content.

#### [Links](/designer/reference/link-element)

Configure links with methods for URLs, targets, and link settings.

#### [Forms](/designer/reference/forms)

Create and configure forms and form field settings.

#### [Components](/designer/reference/component-element)

Get components definitions from a component instance.

## Best Practices for Element Type Methods

1. **Always check element type before applying type-specific methods**:
   ```typescript
   if (element.type === "Image") {
     // Now it's safe to use Image methods
     await element.setAltText("Description");
   }
   ```

2. **Handle multiple element types with type guards**:
   ```typescript
   function handleElement(element) {
     switch(element.type) {
       case "String":
         return element.getText();
       case "Image":
         return element.getAsset();
       default:
         return null;
     }
   }
   ```

3. **Combine property and type checks for maximum safety**:
   ```typescript
   if (element.type === "DOM" && element.children) {
     // Safe to use DOM methods and children methods
     await element.setTag("div");
     await element.append(Webflow.elementPresets.Paragraph);
   }
   ```

> Learn about different element types and their specific methods in the Webflow Designer API

## Docs

- [Element Presets](https://developers.webflow.com/designer/reference/element-presets.md): 
- [DOM Element](https://developers.webflow.com/designer/reference/dom-element.md): The custom element, also known as the DOM Element, is a placeholder element that you can add any HTML custom attribute, tag, or text to — thereby “creating” that element on the canvas.
- [Get Tag](https://developers.webflow.com/designer/reference/dom-element/getTag.md): Retrieve the HTML tag of the element.
- [Set Tag](https://developers.webflow.com/designer/reference/dom-element/setTag.md): Set the value of the specified HTML tag of the DOMElement.
- [Get All Attributes](https://developers.webflow.com/designer/reference/dom-element/getAllAttributes.md): Retrieve all HTML attributes for the DOMElement.
- [Get Attribute](https://developers.webflow.com/designer/reference/dom-element/getAttribute.md): Retrieve the value of the named HTML attribute of the DOMElement.
- [Set Attribute](https://developers.webflow.com/designer/reference/dom-element/setAttribute.md): Set the value of the specified HTML attribute of the DOMElement.
- [Remove Attribute](https://developers.webflow.com/designer/reference/dom-element/removeAttribute.md): Remove the specified HTML attribute from the DOMElement.
- [String Element](https://developers.webflow.com/designer/reference/string-element.md): The String element represents a string value within the Webflow Designer
- [Get Text](https://developers.webflow.com/designer/reference/string-element/getText.md): Retrieves the text value from a String element.
- [Set Text](https://developers.webflow.com/designer/reference/string-element/setText.md): Sets the text value on a String element, overwriting any prior text value.
- [Component Instances](https://developers.webflow.com/designer/reference/component-element.md): 
- [Get Component](https://developers.webflow.com/designer/reference/component-element/getComponent.md): Retrieves the associated component of the element.
- [Search props (Beta)](https://developers.webflow.com/designer/reference/component-element/searchProps.md): Search the props on a component instance and return the information about matching props.
- [Get Props (Beta)](https://developers.webflow.com/designer/reference/component-element/getProps.md): Get the raw values for all props on a component instance.
- [Get Resolved Props (Beta)](https://developers.webflow.com/designer/reference/component-element/getResolvedProps.md): Get the resolved values for all props on a component instance.
- [Set Props (Beta)](https://developers.webflow.com/designer/reference/component-element/setProps.md): Set prop values on a component instance.
- [Reset All Props (Beta)](https://developers.webflow.com/designer/reference/component-element/resetAllProps.md): Reset all prop values on a component instance to their component defaults.
- [Get Slots (Beta)](https://developers.webflow.com/designer/reference/component-element/getSlots.md): Get all slots on a component instance.
- [Get Selected Slot (Beta)](https://developers.webflow.com/designer/reference/component-element/getSelectedSlot.md): Get the currently selected slot on a component instance.
- [Get Text Prop Element (Beta)](https://developers.webflow.com/designer/reference/component-element/getTextPropElement.md): Get the text or rich text prop element for a given prop on a component instance.
- [Unlink Component (Beta)](https://developers.webflow.com/designer/reference/component-element/unlinkComponent.md): Convert a component instance into a plain element tree.
- [Slots (Beta)](https://developers.webflow.com/designer/reference/slot-instance-element.md): 
- [Get display name (Beta)](https://developers.webflow.com/designer/reference/slot-instance-element/getDisplayName.md): Get the display name of a slot as defined on the component.
- [Get Children (Beta)](https://developers.webflow.com/designer/reference/slot-instance-element/getChildren.md): Get the component instances currently placed in a slot.
- [Prepend (Beta)](https://developers.webflow.com/designer/reference/slot-instance-element/prepend.md): Add a component instance as the first child of a slot.
- [Append (Beta)](https://developers.webflow.com/designer/reference/slot-instance-element/append.md): Add a new component instance as the last child of a slot.
- [Heading Element](https://developers.webflow.com/designer/reference/heading-element.md): 
- [Get Heading Level](https://developers.webflow.com/designer/reference/heading-element/getHeadingLevel.md): Retrieves the heading level of a heading element.
- [Set Heading Level](https://developers.webflow.com/designer/reference/heading-element/setHeadingLevel.md): Set the heading level of a heading element.
- [Image Element](https://developers.webflow.com/designer/reference/image-element.md): 
- [Get Asset](https://developers.webflow.com/designer/reference/image-element/getAsset.md): Retrieve an asset from an Image element.
- [Set Asset](https://developers.webflow.com/designer/reference/image-element/setAsset.md): Add an asset to an Image element.
- [Get Alt Text](https://developers.webflow.com/designer/reference/image-element/getAltText.md): Retrieve the Alt Text for an Image element on the canvas.
- [Set Alt Text](https://developers.webflow.com/designer/reference/image-element/setAltText.md): Set the Alt Text for an Image element on the canvas.
- [Link Element](https://developers.webflow.com/designer/reference/link-element.md): 
- [Get Link Target](https://developers.webflow.com/designer/reference/link-element/getTarget.md): Get the target value of the link block element.
- [Set Link Settings](https://developers.webflow.com/designer/reference/link-element/setSettings.md): Apply settings for a Link Block element.
- [Forms](https://developers.webflow.com/designer/reference/forms.md): Learn how to create and manage forms with the Designer API.
- [Get Form Name](https://developers.webflow.com/designer/reference/form-element/get-form-name.md): Retrieves the name of the form.
- [Set Form Name](https://developers.webflow.com/designer/reference/form-element/set-form-name.md): Sets the name of the form.
- [Get Form Settings](https://developers.webflow.com/designer/reference/form-element/get-form-settings.md): Retrieves the settings of the form.
- [Set Form Settings](https://developers.webflow.com/designer/reference/form-element/set-form-settings.md): Sets the settings of the form.
- [Form Inputs](https://developers.webflow.com/designer/reference/form-inputs.md): An overview of form input elements and how to create and manage them with the Designer API.
- [Get Required Status](https://developers.webflow.com/designer/reference/form-element/get-required-status.md): Retrieves the required status of a form input.
- [Set Required Status](https://developers.webflow.com/designer/reference/form-element/set-required-status.md): Sets the required status of a form input.
- [Get input name](https://developers.webflow.com/designer/reference/form-element/get-name-input-field.md): Retrieves the name of the input field.
- [Set input name](https://developers.webflow.com/designer/reference/form-element/set-name-input-field.md): Sets the name of the input field.
- [Get input type](https://developers.webflow.com/designer/reference/form-element/get-type-input-field.md): Retrieves the type of the input field.
- [Set input type](https://developers.webflow.com/designer/reference/form-element/set-type-input-field.md): Sets the type of the input field.