How to Load a File from an npm Package with UNPKG

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.