---
area: "Learn"
parent: "Getting started"
url: "https://unpoly.com/learn/install"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [Learn](https://unpoly.com/learn.md) · [Getting started](https://unpoly.com/learn/start/overview.md)</nav>

# Installation

Unpoly is one JavaScript file and one CSS file that you load in your `<head>`. It has no dependencies and needs no build step. Compressed with gzip, the JavaScript weighs 59.7 KB and the CSS 1.1 KB.

Unpoly works with any language and any web framework. Your backend keeps rendering HTML and needs no additional software. Static sites work, too.

<nav aria-label="Contents">

- [Loading Unpoly from a CDN](#initialization)
- [Installing from npm](#npm)
- [Optional extensions](#extensions)
- [Docs for coding agents](#agents)

</nav>

## Loading Unpoly from a CDN {#initialization}

For a quick test drive, load both files from a CDN. Include them before your own JavaScripts and stylesheets:

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/unpoly@3.15.0/unpoly.css">
    <script src="https://cdn.jsdelivr.net/npm/unpoly@3.15.0/unpoly.js" defer></script>
    <link rel="stylesheet" href="your-styles.css" />
    <script src="your-scripts.js" defer></script>
  </head>
  <body>
    <!-- Use Unpoly attributes in your HTML -->
    <a href="/page" up-follow>Go to page</a>
  </body>
</html>
```

Unpoly initializes on [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) and **enhances the HTML on your page**. This is all you need to use Unpoly attributes, like the [`[up-follow]`](https://unpoly.com/api/up-follow.md) link above. Other installation methods, like npm, are explained below.

## Installing from npm {#npm}

To make Unpoly a permanent part of your app, you can install it as an [npm package](https://www.npmjs.com/package/unpoly):

```nohighlight
npm install unpoly --save
```

Now import Unpoly before your own JavaScripts and stylesheets:

```js
import 'unpoly/unpoly.js'
import 'unpoly/unpoly.css'
import './your-scripts.js'
import './your-styles.css'
```

Your own code then accesses Unpoly's JavaScript API through the `window.up` global, without an explicit `import`.

## Optional extensions {#extensions}

You now have everything you need to start using Unpoly. For special needs, there are optional extensions:

- [Server protocol](https://unpoly.com/learn/server-protocol.md): Inspect or manipulate Unpoly's rendering through HTTP headers.
- [Legacy browser support](https://unpoly.com/learn/legacy-browsers.md): Builds for old browsers and build tools.
- [Bootstrap integration](https://unpoly.com/learn/bootstrap-integration.md): Configure Unpoly to use Bootstrap's CSS classes.
- [Upgrade shim](https://unpoly.com/changes/upgrading.md): Polyfills for deprecated Unpoly APIs.

## Docs for coding agents {#agents}

Coding agents work better with Unpoly when they read its documentation instead of guessing. Install the docs as an agent skill:

```nohighlight
npx skills add --global https://unpoly.com
```

The [skill page](https://unpoly.com/learn/skill.md) has other ways to install the skill, and shows how to use the docs in an AI chat.

<nav aria-label="Reading order">

- [Previous: How Unpoly works](https://unpoly.com/learn/start/overview.md)
- [Next: Link to a fragment](https://unpoly.com/learn/start/links.md)

</nav>