New Element Inspection API

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

1 const selectedElement = await webflow.getSelectedElement();
2 const img = document.getElementById("snapshot-image") as HTMLImageElement;
3 
4 if (selectedElement) {
5   const snapshot = await webflow.getElementSnapshot(selectedElement);
6 
7   if (snapshot) {
8     // Set the base64 string as the image source
9     img.src = snapshot;
10   }
11 }

Learn more

For complete documentation, see the Get Element Snapshot reference.