unpkg.com No paid content found

UNPKG is a global content delivery network (CDN) for files published to npm, and its cache performance comes from two layers working together: immutable versioned URLs that browsers and edge nodes can cache for a long time, and a global edge network that serves repeated requests from a location near the user. The practical result is that a request for a pinned version like unpkg.com/[email protected]/umd/react.production.min.js can be served from cache instead of hitting npm's registry, while a request for a moving target like unpkg.com/react@latest/... is harder to cache because the underlying file can change.

Why Versioned URLs Cache Well

The URL structure unpkg.com/:package@:version/:file is the key mechanism. When you pin an exact version, the content behind that URL never changes — the same version of a package on npm is immutable. That makes the URL safe to cache aggressively at every layer: the browser, intermediate proxies, and UNPKG's own edge nodes.

By contrast:

• unpkg.com/[email protected]/dist/preact.min.js — exact version, stable content, cache-friendly.
• unpkg.com/preact@latest/dist/preact.min.js — resolves to whatever the latest tag points to today, so the content can change when a new version is published.
• unpkg.com/react@^18/umd/react.production.min.js — a semver range, which can also resolve to a different file over time.

If you don't specify a version at all, UNPKG uses the latest tag by default, so unpkg.com/preact/dist/preact.min.js behaves like the latest case.

Practical takeaway: pin exact versions in production so you get the strongest caching and predictable content. Use latest or ranges only when you deliberately want to track new releases.

The Global Edge Network

UNPKG describes itself as a "fast, global" CDN, which means requests are handled by edge nodes distributed geographically rather than a single origin server. For a user in one region requesting a popular package, the file is likely already cached at a nearby edge node from previous traffic, so the response avoids a round trip to the registry.

This matters most for:

• Popular packages (React, Vue, Preact, Three.js) that see heavy traffic and stay warm in edge caches.
• Repeated requests across many users, where the first request populates the cache and later ones are served quickly.

Less popular or newly published packages may not be cached at every edge node yet, so the first request in a region can be slower than subsequent ones.

Cache Behavior You Should Plan Around

A few practical implications:

• Pin versions for production assets. This is the single biggest lever for cache performance and reproducibility.
• Expect first-request latency for cold packages. A package with little traffic may not be cached near your users yet.
• Don't rely on UNPKG for private or frequently changing content. It serves public npm packages, and moving targets undercut caching.

What UNPKG Does Not Change

UNPKG's caching is about delivery speed, not about bypassing npm. The files it serves are the published package contents on npm, so anything you'd change by republishing a version isn't something UNPKG's cache can fix — and republishing the same version isn't how npm versioning works anyway. If you need different content, you publish a new version and update your URL.

For most frontend use cases — loading a library via a <script> tag or an ES module import — pinning an exact version and letting UNPKG's edge network handle distribution gives you the best combination of speed and predictability.

UNPKG is a fast, global content delivery network (CDN) for everything published on npm. You use it to load any file from any npm package directly in a browser or script by constructing a URL in the form unpkg.com/:package@:version/:file. It is most useful when you want to pull a dependency into a page or prototype without setting up a build step or installing anything locally.

How the URL works

Every UNPKG request maps to a file inside an npm package. The URL has three segments, and only the first is required:

Concrete examples from the site:

unpkg.com/[email protected]/dist/preact.min.js
unpkg.com/[email protected]/umd/react.production.min.js
unpkg.com/[email protected]/build/three.module.min.js

You can substitute any valid semver range or npm tag for the version:

unpkg.com/preact@latest/dist/preact.min.js
unpkg.com/react@^18/umd/react.production.min.js

If you omit the version entirely, the latest tag is used by default:

unpkg.com/preact/dist/preact.min.js
unpkg.com/vue/dist/vue.esm-browser.prod.js

Browsing and resolving files

If you don't know the exact file path, UNPKG helps you find it.

• Directory listings: add a trailing / to a directory URL to see all files in it, e.g. unpkg.com/react/, unpkg.com/preact/src/, or unpkg.com/react-router/.
• Older versions: include a version number to browse a specific release, e.g. unpkg.com/react@18/ or unpkg.com/react-router@5/.
• Default entry point: if you omit the file path, UNPKG resolves the package's default entry. For many frontend-only packages like jQuery and GSAP, this is the main field in package.json, so unpkg.com/jquery and unpkg.com/gsap just work.

How entry points resolve in modern packages

For packages that use the exports field, UNPKG resolves the file using the default export condition. If you publish a package like this:

{
  "name": "my-package",
  "exports": {
    "default": "./dist/index.js"
  }
}

you can load it with:

<script src="https://unpkg.com/my-package"></script>

The full exports spec is supported, including subpaths. Given:

{
  "name": "my-package",
  "exports": {
    "./exp": {
      "default": "./dist/exp.js"
    }
  }
}

you can load the subpath with:

<script src="https://unpkg.com/my-package/exp"></script>

Custom export conditions are supported through the ?conditions query parameter, which lets you load a different file based on environment or other conditions. For example, to fetch React using the react-server condition:

fetch("https://unpkg.com/react?conditions=react-server")

When to use it

UNPKG fits quick, no-build scenarios:

• No-build apps — drop a <script> tag into an HTML file and start using a library.
• Inline scripts — reference a package URL inside a script block or console snippet.
• Browser modules — load ESM builds directly with import from a UNPKG URL.

If you need pinned, reproducible dependencies in production, prefer a versioned URL (or a lockfile-based bundler) rather than relying on latest, since the default tag can change when a package publishes a new release.

Use a UNPKG URL in the form https://unpkg.com/:package@:version/:file. Put the npm package name in :package, a version, dist-tag, or semver range in :version, and the path to the file inside the package in :file. If you omit the version, UNPKG resolves the latest tag by default. If you omit the file path, UNPKG resolves the package's default entry point.

The URL format

https://unpkg.com/:package@:version/:file

Concrete examples from the UNPKG site:

https://unpkg.com/[email protected]/dist/preact.min.js
https://unpkg.com/[email protected]/umd/react.production.min.js
https://unpkg.com/[email protected]/build/three.module.min.js

Choosing a version

You are not limited to an exact version number. UNPKG accepts any valid semver range or npm tag:

https://unpkg.com/preact@latest/dist/preact.min.js
https://unpkg.com/react@^18/umd/react.production.min.js

If you leave the version out entirely, the latest tag is used:

https://unpkg.com/preact/dist/preact.min.js
https://unpkg.com/vue/dist/vue.esm-browser.prod.js

For production pages, pin an exact version so a new release cannot change what your users load. Use latest or a range only when you deliberately want updates.

Browsing a package

Add a trailing / to a directory URL to see a listing of all files in that directory:

https://unpkg.com/react/
https://unpkg.com/preact/src/
https://unpkg.com/react-router/

To browse an older version, include the version in the URL:

https://unpkg.com/react@18/
https://unpkg.com/react-router@5/

When you omit the file path

If you do not specify a file, UNPKG resolves the file based on the package's default entry point.

• For many frontend-only packages such as jQuery and GSAP, this is the main field in package.json:

https://unpkg.com/jquery
https://unpkg.com/gsap

• For modern packages that use the exports field, UNPKG resolves using the default export condition. Given this package.json:

{
  "name": "my-package",
  "exports": {
    "default": "./dist/index.js"
  }
}

you can load the package with:

<script src="https://unpkg.com/my-package"></script>

The full exports spec is supported, including subpaths. With this package.json:

{
  "name": "my-package",
  "exports": {
    "./exp": {
      "default": "./dist/exp.js"
    }
  }
}

you can load the exp subpath with:

<script src="https://unpkg.com/my-package/exp"></script>

Custom export conditions

You can request a different file based on environment or other conditions with the ?conditions query parameter. For example, to fetch React using the react-server condition:

fetch("https://unpkg.com/react?conditions=react-server")

Common pitfalls

• Missing file path on a package with no usable entry point. If the package's main or exports does not point to a browser-ready file, the bare URL may return something you cannot load in a <script> tag. Add the explicit file path instead.
• Relying on latest in production. A new publish can silently change the file your page loads. Pin the version.
• Wrong file for the environment. A CommonJS build will not run as a browser module. Check the package's dist or build directory for the ESM or UMD file you need.
• Assuming a directory URL returns a file. A trailing / gives you a file listing, not the package entry point.

When you request a package from UNPKG without a file path, UNPKG resolves the file using the package's default entry point. For packages that use the exports field, it resolves using the default export condition. For older packages without exports, it falls back to the main field in package.json. If you want a specific file instead, include the path in the URL.

The URL pattern

UNPKG serves any file on npm through a URL of this shape:

https://unpkg.com/:package@:version/:file

If you omit the version, the latest tag is used. If you omit the file path, UNPKG resolves the default entry point.

How the default entry point is chosen

The resolution depends on how the package declares its entry points.

Packages using exports

Modern packages declare entry points with the exports field. UNPKG resolves the file using the default export condition.

For example, given this package.json:

{
  "name": "my-package",
  "exports": {
    "default": "./dist/index.js"
  }
}

You can load the package with just the package name:

<script src="https://unpkg.com/my-package"></script>

Packages using main

For packages meant for frontend development that don't use exports — jQuery and GSAP are the examples UNPKG gives — the default entry point is the value of the main field in package.json.

https://unpkg.com/jquery
https://unpkg.com/gsap

Subpaths and custom conditions

The full exports spec is supported, including subpaths. If a package declares:

{
  "name": "my-package",
  "exports": {
    "./exp": {
      "default": "./dist/exp.js"
    }
  }
}

You can load that subpath directly:

<script src="https://unpkg.com/my-package/exp"></script>

Custom export conditions are supported through the ?conditions query parameter, which lets you load a different file based on the environment or other conditions. To fetch React using the react-server condition:

fetch("https://unpkg.com/react?conditions=react-server")

Browsing and pinning versions

Add a trailing / to a directory URL to see a listing of every file in that directory:

https://unpkg.com/react/
https://unpkg.com/preact/src/

To browse an older version, put the version in the URL:

https://unpkg.com/react@18/
https://unpkg.com/react-router@5/

You can also use any valid semver range or npm tag, such as preact@latest or react@^18.

Practical takeaways

• Omit the file path only when you trust the package's default entry point. If you need a specific build, name the file explicitly.
• Pin a version in production. A bare package name resolves to latest, which can change without warning.
• Use ?conditions when a package ships environment-specific builds and you need one that isn't the default.
• Check the directory listing first if you're unsure which files a package ships — append / to the package or version URL.