Previews

Generate temporary or permanent preview images of the current design. Temporary previews return data URLs that live for the current page session. Permanent previews return storage URLs that persist after the session ends.

Generate a temporary preview

Call getCurrentDesignTempPreview() to get a data URL for the current surface.

const previewUrl = await editor.getCurrentDesignTempPreview();
document.querySelector("img").src = previewUrl;

Pass a surface selector to render a different surface.

const backUrl = await editor.getCurrentDesignTempPreview({ surfaceName: "Back" });

Call getCurrentDesignTempPreviews() to get temporary previews for all surfaces at once.

const previews = await editor.getCurrentDesignTempPreviews();

for (const url of previews) {
  console.log(url);
}

Generate a permanent preview

Call getCurrentDesignPermanentPreview() to get a storage URL for the current surface.

const previewUrl = await editor.getCurrentDesignPermanentPreview();
console.log(previewUrl);

Pass a selector to render a different surface.

const previewUrl = await editor.getCurrentDesignPermanentPreview({
  surfaceIndex: 0,
});

Call getCurrentDesignPermanentPreviews() to get permanent previews for one surface or all surfaces.

const thumbnails = await editor.getCurrentDesignPermanentPreviews({
  surfaceName: "Front",
});

for (const url of thumbnails) {
  console.log(url);
}

Omit the argument to generate previews for all surfaces.

A surface can include several mockups. In that case, the method returns one URL per mockup.

Reference

• ISurfaceOptions — the surface selection options.
• IHeadlessEditor — the full method reference.