Load Packages from CDN

Load npm and GitHub packages directly from CDNs without build tools.

When to use

Use CDN loading when building prototypes, demos, single-file HTML applications, or educational examples where you want to skip npm install and load packages directly in the browser.

The pattern

Use esm.run to load any npm package as an ES module. It is jsdelivr's ES module endpoint — it automatically converts packages into browser-compatible ES module builds. Import with a standard import statement inside a <script type="module">:

<script type="module">
  import confetti from "https://esm.run/canvas-confetti@1.6.0";
  confetti();
</script>

Named exports work the same way:

<script type="module">
  import { html, render } from "https://esm.run/lit-html@3.1.0";
  
  const template = html`<h1>Hello!</h1>`;
  render(template, document.body);
</script>

Example: Script tags for UMD builds

Some libraries only ship UMD builds that attach globals to window. For these, use a traditional <script> tag pointing at the full jsdelivr URL:

<script
  src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"
></script>

<script>
  axios.get("/api/data").then((response) => {
    console.log("Data received at:", moment().format());
  });
</script>

CDN URL formats

All three URL formats below are served by jsdelivr. Use esm.run for ES module imports and cdn.jsdelivr.net when you need a specific file from a package or a GitHub repository:

https://esm.run/package@version
https://cdn.jsdelivr.net/npm/package@version/file
https://cdn.jsdelivr.net/gh/user/repo@version/file

Other CDNs like unpkg, cdnjs, and skypack serve a similar role but jsdelivr has the broadest coverage and most reliable uptime.

Version pinning

Always pin exact versions. Unpinned URLs use latest, which can change without warning and break your page:

<!-- bad: unpinned version -->
<script
  src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
></script>

<!-- good: pinned version -->
<script
  src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"
></script>

Trade-offs

Advantages:

• Zero setup — works immediately in any HTML file
• No npm install or build tools required
• Good for quick experiments and prototyping

Disadvantages:

• Not suitable for production applications with complex dependencies
• No tree shaking or dead code elimination
• Bundle size is not optimized
• Unpinned versions can break without warning