What is UNPKG?

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.