---
name: "up.Preview.prototype.showPlaceholder"
area: "API"
kind: "Instance method"
parent: "up.Preview class"
visibility: "experimental"
url: "https://unpoly.com/api/up.Preview.prototype.showPlaceholder"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.Preview class](https://unpoly.com/api/up.Preview.md)</nav>

# up.Preview.prototype.showPlaceholder([element], newContent)

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Shows a temporary [placeholder](https://unpoly.com/learn/placeholders.md) within an element.

The element's existing children will be hidden for the duration of this preview. When the preview ends, the placeholder will be removed and the element's original children are shown again.

If the previewed render pass [opens a new overlay](https://unpoly.com/learn/opening-overlays.md), the placeholder will be shown in a temporary overlay with the same [visual style](https://unpoly.com/learn/customizing-overlays.md) and open animation.

## Example {#example}

This preview shows a `.skeleton` element within the [targeted fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md):

```js
up.preview('skeleton', function(preview) {
  preview.showPlaceholder('<span class="skeleton">...</span>')
})
```

You may also clone a [template](https://unpoly.com/learn/templates.md):

```js
up.preview('skeleton', function(preview) {
  preview.showPlaceholder('#skeleton-template')
})
```

To show the placeholder within another element, pass it as a first reference argument:

```js
up.preview('showPlaceholder', function(preview) {
  preview.showPlaceholder('body', '#skeleton-template')
})
```

---

## Parameters {#parameters}

### [element=this.fragment] {#element}

(optional)

The element within which to show a placeholder, or its selector.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | string

### newContent {#newContent}

(required)

The placeholder to insert.

You may pass an [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), a CSS selector or a snippet of HTML.

If the given element is a [template](https://unpoly.com/learn/templates.md), it will be cloned before insertion.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | string