> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/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);
   }
   ```