UtilitiesElement Inspection

Get element snapshot

webflow.getElementSnapshot()

Captures a snapshot of the specified element.

Syntax

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

1const selectedElement = await webflow.getSelectedElement();
2
3if (selectedElement) {
4  const snapshot = await webflow.getElementSnapshot(selectedElement);
5  console.log("Snapshot:", snapshot); // base64 string
6} else {
7  console.log("No element selected");
8}

Render snapshot as an image

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

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny