> This page is for Home.

> 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.

# New Element Inspection API

> Introducing the new Element Inspection API with getElementSnapshot for capturing visual snapshots of elements.

We're introducing a new **Element Inspection** category in the Designer API, starting with the `getElementSnapshot` method that allows you to capture visual snapshots of elements on the canvas.

## What's new

### Element Inspection

A new API category focused on inspecting and capturing element data:

* **`webflow.getElementSnapshot(element)`** - Captures a visual snapshot of any element and returns it as a [base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64) encoded PNG string with the `data:image/png;base64,` prefix included

## Use cases

The `getElementSnapshot` method enables several powerful workflows:

* **Visual documentation**: Capture element snapshots for design documentation or style guides
* **AI-powered design analysis**: Send element snapshots to AI models for visual analysis and suggestions
* **Design comparison**: Capture before/after snapshots during design iterations
* **Thumbnail generation**: Create previews of components or sections

## Example usage

```typescript
const selectedElement = await webflow.getSelectedElement();
const img = document.getElementById("snapshot-image") as HTMLImageElement;

if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);

  if (snapshot) {
    // Set the base64 string as the image source
    img.src = snapshot;
  }
}
```

## Learn more

For complete documentation, see the [Get Element Snapshot](/designer/reference/get-element-snapshot) reference.