Changelog

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.