Get element snapshot

`webflow.getElementSnapshot()`

Captures a snapshot of the specified element.

Syntax

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

Parameters

Parameter	Type	Description
`element`	AnyElement	The 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

1 const selectedElement = await webflow.getSelectedElement();
2 
3 if (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

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     // Get an existing image element and set the base64 string as source
9     img.src = snapshot;
10   }
11 }

Try this example

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

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

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	// Get an existing image element and set the base64 string as source
9	img.src = snapshot;
10	}
11	}