---
name: "[up-preview]"
area: "API"
kind: "HTML attribute"
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]

Links or forms can name a [preview function](https://unpoly.com/learn/previews.md) that is called while loading content from the server.

When the user interacts with a link or form, its preview function is invoked immediately. The function will usually [mutate the DOM](https://unpoly.com/learn/previews.md#basic-mutations) to signal that the app is working or to provide clues for how the page will ultimately look. For example, if the user is deleting an item from a list, the preview function could hide that item visually.

See [Previews](https://unpoly.com/learn/previews.md) for details and examples.

<nav aria-label="Guides">

- [Learn: Previews](https://unpoly.com/learn/previews.md)

</nav>

## Usage {#usage}

To refer to a preview function, set its name as an `[up-preview]` attribute:

```html
<a href="/edit" up-follow up-preview="spinner">Edit page</a>
```

To [call multiple previews](https://unpoly.com/learn/previews.md#multiple), separate their names with a comma:

```html
<a href="/edit" up-follow up-preview="spinner, dim-page">Edit page</a>
```

[Preview options](https://unpoly.com/learn/previews.md#parameters) can be appended after each preview name, encoded as [relaxed JSON](https://unpoly.com/api/relaxed-json.md):

```html
<a href="/edit"
   up-follow
   up-preview="spinner { size: 20 }, dim-page { animation: 'pulse' }">
  Edit page
</a>
```

---

## Modifying attributes {#attributes}

### up-preview {#up-preview}

(required)

The name of a preview function defined with [`up.preview()`](https://unpoly.com/api/up.preview.md).

To call multiple previews, separate names with a comma.