UtilitiesElement Inspection

Get element snapshot

webflow.getElementSnapshot()

Captures a snapshot of the specified element.

Syntax

webflow.getElementSnapshot(element: AnyElement): Promise<null | string>

Parameters

ParameterTypeDescription
elementAnyElementThe element to capture a snapshot of.

Returns

A Promise that resolves to a base64 string representing the snapshot of the element, or null if the snapshot could not be captured. The string is a PNG image and includes the data:image/png;base64, prefix, making it ready to use directly as an image source.

Examples

Get a snapshot

const selectedElement = await webflow.getSelectedElement();
if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);
  console.log("Snapshot:", snapshot); // base64 string
} else {
  console.log("No element selected");
}

Render snapshot as an image

const selectedElement = await webflow.getSelectedElement();
const img = document.getElementById("snapshot-image") as HTMLImageElement;
if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);
  if (snapshot) {
    // Get an existing image element and set the base64 string as source
    img.src = snapshot;
  }
}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny