---
title: "Previews | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/previews/"
---

# 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.

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

Pass a surface selector to render a different surface.

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

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

```typescript
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.

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

Pass a selector to render a different surface.

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

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

```typescript
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.