---
name: "up.Preview.prototype.run"
area: "API"
kind: "Instance method"
parent: "up.Preview class"
visibility: "experimental"
url: "https://unpoly.com/api/up.Preview.prototype.run"
---
<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.run(nameOrFn, options)

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

Runs another preview function.

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Undo callbacks are merged](#undo-callbacks-are-merged)
- [Passing options](#passing-options)
- [Sharing behavior between previews](#sharing-behavior-between-previews)
- [Parameters](#parameters)

</nav>

## Example {#example}

To run another preview function registered with [`up.preview()`](https://unpoly.com/api/up.preview.md), pass its name:

```js
up.preview('foo', function(preview) {
  // ...
})

up.preview('bar', function(preview) {
  preview.run('foo')
})
```

## Undo callbacks are merged {#undo-callbacks-are-merged}

All [undo callbacks](https://unpoly.com/api/up.Preview.prototype.undo.md) from the other preview will be added to this preview.

In the example below, `preview2` will call both `undo1()` and `undo2()` when the preview [ends](https://unpoly.com/learn/previews.md#ending):

```js
function undo1() { ... }
function undo2() { ... }

up.preview('preview1', function(preview) {
  preview.undo(undo1)
})

up.preview('preview2', function(preview) {
  preview.run('preview1')
  preview.undo(undo2)
})
```

## Passing options {#passing-options}

To call a [preview with parameters](https://unpoly.com/learn/previews.md#parameters), pass an options object as a second argument:

```js
up.preview('foo', function(preview, { size, speed }) {
  // ...
})

up.preview('bar', function(preview) {
  preview.run('foo', { size: 'large', speed: 'fast' })
})
```

## Sharing behavior between previews {#sharing-behavior-between-previews}

Instead of running a preview by its registered name, you can pass any function that accepts an [`up.Preview`](https://unpoly.com/api/up.Preview.md) argument.

This is a way to share common behavior between multiple preview functions:

```js
function shared(preview) {
  // ...
}

up.preview('foo', function(preview) {
  preview.run(shared)
})

up.preview('bar', function(preview) {
  preview.run(shared)
})
```

---

## Parameters {#parameters}

### nameOrFn {#nameOrFn}

(required)

Another preview function or its [registered name](https://unpoly.com/api/up.preview.md).

Type: string | Function([up.Preview](https://unpoly.com/api/up.Preview.md), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects))

### options {#options}

(required)

[Parameters](https://unpoly.com/learn/previews.md#parameters) that will be passed to the other preview function.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)