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

# `up.Preview`

Instances of `up.Preview` can describe temporary changes to a page.

You can use this to describe [arbitrary loading state](https://unpoly.com/learn/previews.md) or [implement optimistic rendering](https://unpoly.com/learn/optimistic-rendering.md).

Previews are usually defined using [`up.preview()`](https://unpoly.com/api/up.preview.md) (lowercase) and then applied using the [`[up-preview]`](https://unpoly.com/api/up-preview.md) attribute or [`{ preview }`](https://unpoly.com/api/up.render.md#options.preview) option. See [Previews](https://unpoly.com/learn/previews.md) for an overview.

---

## Features {#features}

- ### [up.Preview.prototype.addClass([element], className)](https://unpoly.com/api/up.Preview.prototype.addClass.md) (Instance method)

  Temporarily adds a CSS class to an element.

- ### [up.Preview.prototype.disable([element])](https://unpoly.com/api/up.Preview.prototype.disable.md) (Instance method)

  Temporarily disables fields and buttons.

- ### [up.Preview.prototype.ended](https://unpoly.com/api/up.Preview.prototype.ended.md) (Property)

  Whether this preview has ended.

- ### [up.Preview.prototype.expiredResponse](https://unpoly.com/api/up.Preview.prototype.expiredResponse.md) (Property) (experimental)

  When revalidating a cache entry, this property is the cached response with expired content.

- ### [up.Preview.prototype.fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md) (Property)

  The targeted `Element` that is being previewed.

- ### [up.Preview.prototype.hide([element])](https://unpoly.com/api/up.Preview.prototype.hide.md) (Instance method)

  Temporarily hides an element.

- ### [up.Preview.prototype.hideContent([element])](https://unpoly.com/api/up.Preview.prototype.hideContent.md) (Instance method) (experimental)

  Temporarily hides the children of an element.

- ### [up.Preview.prototype.insert([reference], [position], newElement)](https://unpoly.com/api/up.Preview.prototype.insert.md) (Instance method)

  Temporarily inserts an element.

- ### [up.Preview.prototype.layer](https://unpoly.com/api/up.Preview.prototype.layer.md) (Property)

  The layer that the previewed render pass is going to update.

- ### [up.Preview.prototype.openLayer()](https://unpoly.com/api/up.Preview.prototype.openLayer.md) (Instance method) (experimental)

  Opens a temporary overlay.

- ### [up.Preview.prototype.origin](https://unpoly.com/api/up.Preview.prototype.origin.md) (Property)

  The origin element that triggered this render pass.

- ### [up.Preview.prototype.params](https://unpoly.com/api/up.Preview.prototype.params.md) (Property)

  Form data for the request being previewed.

- ### [up.Preview.prototype.removeClass([element], className)](https://unpoly.com/api/up.Preview.prototype.removeClass.md) (Instance method)

  Temporarily removes a CSS class from an element.

- ### [up.Preview.prototype.renderOptions](https://unpoly.com/api/up.Preview.prototype.renderOptions.md) (Property)

  The render options for this render pass.

- ### [up.Preview.prototype.request](https://unpoly.com/api/up.Preview.prototype.request.md) (Property)

  The request that is loading.

- ### [up.Preview.prototype.revalidating](https://unpoly.com/api/up.Preview.prototype.revalidating.md) (Property) (experimental)

  Whether the previewed render pass is a revalidation of an expired cache entry.

- ### [up.Preview.prototype.run(nameOrFn, options)](https://unpoly.com/api/up.Preview.prototype.run.md) (Instance method) (experimental)

  Runs another preview function.

- ### [up.Preview.prototype.setAttrs([element], attributes)](https://unpoly.com/api/up.Preview.prototype.setAttrs.md) (Instance method)

  Temporarily changes an element's attributes.

- ### [up.Preview.prototype.setStyle([element], styles)](https://unpoly.com/api/up.Preview.prototype.setStyle.md) (Instance method)

  Temporarily sets inline CSS styles on an element.

- ### [up.Preview.prototype.show([element])](https://unpoly.com/api/up.Preview.prototype.show.md) (Instance method)

  Temporarily shows a hidden element.

- ### [up.Preview.prototype.showPlaceholder([element], newContent)](https://unpoly.com/api/up.Preview.prototype.showPlaceholder.md) (Instance method) (experimental)

  Shows a temporary placeholder within an element.

- ### [up.Preview.prototype.swapContent([element], newContent)](https://unpoly.com/api/up.Preview.prototype.swapContent.md) (Instance method) (experimental)

  Visually replaces the children of an element with new content for the duration of this preview.

- ### [up.Preview.prototype.undo(undoFn)](https://unpoly.com/api/up.Preview.prototype.undo.md) (Instance method)

  Register a function that will revert this preview's effects when the preview ends.