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

# `up.script`

Features to attach JavaScript behavior to HTML elements whenever they enter the page.

Register a compiler with [`up.compiler()`](https://unpoly.com/api/up.compiler.md). It can return a destructor that cleans up when the element is removed, or you register one with [`up.destructor()`](https://unpoly.com/api/up.destructor.md). Elements pass structured data to their compilers through an [`[up-data]`](https://unpoly.com/api/up-data.md) attribute, which [`up.data()`](https://unpoly.com/api/up.data.md) reads. Macros registered with [`up.macro()`](https://unpoly.com/api/up.macro.md) run before all other compilers, usually to set other Unpoly attributes on the element.

When your own code inserts HTML into the page, call [`up.hello()`](https://unpoly.com/api/up.hello.md) on the new element so its compilers run. Elements marked [`[up-asset]`](https://unpoly.com/api/up-asset.md) track your scripts and stylesheets, so Unpoly can notice when a new version was deployed.

<nav aria-label="Guides">

- [Learn: Scripting](https://unpoly.com/learn/scripting.md)

</nav>

---

## Features {#features}

- ### [[up-asset]](https://unpoly.com/api/up-asset.md) (HTML attribute)

  Tracks an element as a frontend asset, usually JavaScript and stylesheets.

- ### [up:assets:changed](https://unpoly.com/api/up:assets:changed.md) (DOM event)

  This event is emitted when frontend code changes while the application is running.

- ### [up.compiler(selector, [options], compiler)](https://unpoly.com/api/up.compiler.md) (JavaScript function)

  Registers a function to be called when Unpoly inserts a matching element.

- ### [up.$compiler(selector, [options], compiler)](https://unpoly.com/api/up.$compiler.md) (JavaScript function) (deprecated)

  Registers a function to be called when an element with the given selector is inserted into the DOM. The function is called with each matching element as a jQuery object.

- ### [up.data(element)](https://unpoly.com/api/up.data.md) (JavaScript function)

  Returns the data attached to the given element.

- ### [[up-data]](https://unpoly.com/api/up-data.md) (HTML attribute)

  Attaches structured data to an element to be consumed by a compiler or event handler.

- ### [up.destructor(element, destructor)](https://unpoly.com/api/up.destructor.md) (JavaScript function)

  Registers a function to be called when the given element is destroyed.

- ### [up.hello(element, [options])](https://unpoly.com/api/up.hello.md) (JavaScript function)

  Manually compiles a page fragment that has been inserted into the DOM by external code.

- ### [up.macro(selector, [options], macro)](https://unpoly.com/api/up.macro.md) (JavaScript function)

  Registers a compiler that is run before all other compilers.

- ### [up.$macro(selector, options, macro)](https://unpoly.com/api/up.$macro.md) (JavaScript function) (deprecated)

  Registers a compiler that is run before all other compilers. The compiler function is called with each matching element as a jQuery object.

- ### [up.script.config](https://unpoly.com/api/up.script.config.md) (Configuration object)

  Configures defaults for script handling and asset tracking.