Who This Tutorial Is For

Whether you're building a quick prototype, working in a CMS with no build pipeline, or just want to add a single library without setting up npm — loading a JavaScript library via CDN is a skill every web developer should have. This guide walks you through the entire process, from finding the right URL to verifying integrity.

Step 1: Find Your Library on a Public CDN

The two most reliable public CDNs for open-source JavaScript are:

  • jsDelivr (cdn.jsdelivr.net) — Mirrors npm and GitHub packages. Fast, globally distributed, and free.
  • cdnjs (cdnjs.cloudflare.com) — Curated library hosting backed by Cloudflare's network.
  • unpkg (unpkg.com) — Automatically serves any npm package. Great for the latest versions.

Go to jsDelivr.com, search for your library (e.g., "alpinejs"), and find the exact version you need. Always pin to a specific version number in production — never use @latest for live sites.

Step 2: Construct the Script Tag

Once you have your CDN URL, add it to your HTML using a <script> tag. Here's an example loading Alpine.js:

<!-- Place just before </body> for non-critical scripts -->
<script 
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" 
  defer>
</script>

Key points:

  • Use the minified version (.min.js) for smaller file size.
  • Add defer to prevent render-blocking.
  • Place the tag before </body> or in <head> with defer.

Step 3: Add Subresource Integrity (SRI) for Security

Subresource Integrity is a browser security feature that ensures the file you load hasn't been tampered with. The CDN (or srihash.org) provides an integrity hash you add to your script tag:

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"
  integrity="sha512-ZB6K5bP3sDQ..." 
  crossorigin="anonymous">
</script>

If the file has been modified (e.g., by a CDN compromise), the browser will refuse to execute it. Always include SRI hashes for third-party scripts in production.

Step 4: Verify the Library Loaded

Open your browser's developer console (F12) and check that the library's global variable is available:

// For Chart.js
console.log(typeof Chart); // Should print "function"

// For Alpine.js
console.log(typeof Alpine); // Should print "object"

If you see undefined, check for network errors in the Network tab and confirm your script tag is correct.

Step 5: Use the Library

With the library loaded, you can use it immediately in a subsequent script tag:

<canvas id="myChart"></canvas>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{ label: 'Visitors', data: [120, 190, 300] }]
    }
  });
</script>

Common Mistakes to Avoid

  • Floating versions: @latest can break your site when a library releases a major update.
  • Loading too many CDN libraries: Each CDN script is a separate HTTP request and DNS lookup. Limit to what you actually need.
  • Skipping SRI in production: Always add integrity hashes for third-party scripts on live sites.
  • Missing CORS headers: Add crossorigin="anonymous" when using SRI — required for the integrity check to work.

You're Ready

Loading a JavaScript library via CDN takes under 5 minutes and requires no tooling setup. Combined with SRI security and smart script placement, it's a powerful, lightweight approach to dependency management for the right use cases.