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

# up:assets:changed

This event is emitted when [frontend code](https://unpoly.com/api/up-asset.md) changes while the application is running.

When a server response has no `<head>`, this event is never emitted.

The event is emitted on the `document`.

There is no default behavior when assets have changed. In particular, no asset elements from the response are updated in the current page. Event listeners may [handle changed frontend code](https://unpoly.com/learn/handling-asset-changes.md#tracking-assets), e.g., by [notifying the user](https://unpoly.com/learn/handling-asset-changes.md#notifying-the-user) or [loading new assets](https://unpoly.com/learn/handling-asset-changes.md#loading-new-assets).

<nav aria-label="Guides">

- [Learn: Reacting to new deployments](https://unpoly.com/learn/handling-asset-changes.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Emission time](#emission-time)
- [Event properties](#properties)

</nav>

## Example {#example}

The code below inserts a clickable `<div id="new-version">` banner when assets change. The user can then choose to reload at their convenience by clicking on the notification.

```js
up.on('up:assets:changed', function() {
  // If we are already showing a notification, do nothing.
  if (document.querySelector('#new-version')) return

  // Append a <button id="new-version"> notification to the <body>
  up.element.affix(document.body, 'button#new-version', {
    text: 'A new app version is available. Click to reload.',
    onclick: 'location.reload()',
  })
})
```

For more examples, see [Handling asset changes](https://unpoly.com/learn/handling-asset-changes.md).

## Emission time {#emission-time}

The event is emitted at a particular time in the [render lifecycle](https://unpoly.com/learn/render-lifecycle.md):

- _after_ new content has been loaded from the server
- _before_ any fragments have been changed on the page
- _before_ the [browser history](https://unpoly.com/api/up.history.md) was changed. A future history location may be found in `event.renderOptions.location`.

If you cannot allow the rendering to proceed with changed assets, listeners may abort the render pass by calling `event.preventDefault()`.

---

## Event properties {#properties}

### event.newAssets {#event.newAssets}

(required)

A list of all [assets](https://unpoly.com/api/up-asset.md) in the new content.

The list also includes assets that have a matching element on the current page.

By default, no new assets are inserted into the current page. Event listeners must [explicitly load new assets](https://unpoly.com/learn/handling-asset-changes.md#loading-new-assets).

Type: [List](https://unpoly.com/api/List.md)<[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)>

### event.oldAssets {#event.oldAssets}

(required)

A list of [assets](https://unpoly.com/api/up-asset.md) in the `<head>` of the current page.

Type: [List](https://unpoly.com/api/List.md)<[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)>

### event.renderOptions {#event.renderOptions}

(required)

The [render options](https://unpoly.com/api/up.render.md#parameters) for the current render pass.

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

### [event.response] (Experimental) {#event.response}

(optional)

The response that contained new assets.

When [rendering from a string](https://unpoly.com/learn/providing-html.md#string), this property is `undefined`.

Type: [up.Response](https://unpoly.com/api/up.Response.md)

### event.preventDefault() {#event.preventDefault}

(required)

Aborts this render pass before new content is inserted.