What Is cdnjs and How Do You Use It to Load JavaScript and CSS Libraries?
cdnjs is a free, open-source content delivery network (CDN) that hosts popular JavaScript, CSS, and font libraries and serves them from Cloudflare's global network. You use it by copying a hosted file URL from cdnjs.com and pasting it into a <script> or <link> tag in your HTML, so your site loads the library from a fast, cached edge location instead of your own server. It fits most sites that need a common library quickly; it is less suitable when you must pin exact builds you control, run offline, or avoid third-party dependencies.
What cdnjs actually is
cdnjs is a CDN — a network of servers that cache and deliver static files from locations close to each visitor — dedicated to open-source web libraries. According to cdnjs.com, it is "the free, open-source CDN for the web's most popular libraries," covering JavaScript, CSS, and font resources, globally cached on Cloudflare's network. The site states it is trusted by 12.5% of all websites and serves 250 billion requests per month.
Two things follow from that description:
- You don't host the files. cdnjs does, and Cloudflare's edge caches them worldwide.
- The catalog is community-maintained. Libraries are added and updated through the project's GitHub repository, and maintenance is funded through GitHub Sponsors, Open Collective, and Patreon.
How to find a library and get its URL
- Go to cdnjs.com and use the search box (or browse the Libraries list) to find the library you need — for example, a JavaScript framework, a CSS reset, or a font package.
- Open the library's page. You'll see the available versions and the individual files in each version.
- Copy the URL for the file you want. cdnjs URLs follow a predictable pattern:
https://cdnjs.cloudflare.com/ajax/libs/<library>/<version>/<file>
For example, a jQuery build would look like https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js. The exact library name, version, and filename come from the library's page — copy them rather than guessing.
There is also an API if you want to look up libraries or versions programmatically, which is useful for build scripts or checking what versions exist.
How to add it to your page
JavaScript — place the <script> tag before the code that depends on the library, typically at the end of <body> or in <head> with defer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
CSS — place the <link> tag in <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/<library>/<version>/<file>.css">
Fonts — font packages are usually loaded through their accompanying CSS file, which references the font files on the same CDN.
Verify it loaded: open your browser's developer tools, go to the Network tab, reload the page, and confirm the request to cdnjs.cloudflare.com returns a 200 status. Then check the Console tab for errors and confirm the library's global (for example, $ for jQuery) exists.
Picking a version and a file type
- Pin a version. Use a specific version number in the URL rather than a "latest" alias. A pinned version won't change under you, so your site keeps working even after the library publishes a new release.
- Minified vs unminified. Files ending in
.min.jsor.min.cssare compressed for production — smaller and faster, but hard to read. The unminified versions are for debugging. Ship minified files to visitors. - Match related files. If a library needs both a JS and a CSS file, load both from the same version so they stay compatible.
Common problems and when to self-host
| Symptom | Likely cause | Fix |
|---|---|---|
| 404 on the CDN URL | Wrong library name, version, or filename | Re-copy the exact URL from the library's cdnjs page |
| Library loads but your code errors | Version mismatch, or script loaded after dependent code | Pin the version your code was written for; load the script first |
| Works locally, fails in production | A Content Security Policy blocking the CDN domain | Add cdnjs.cloudflare.com to your CSP allowlist |
| Site breaks when the CDN is unreachable | Hard dependency on a third-party host | Self-host the file, or add a fallback |
Self-host instead of using cdnjs when you need offline or air-gapped operation, must guarantee availability independent of a third party, need to modify the library, or your security policy forbids external script sources. For most sites loading standard libraries, the CDN's caching and global distribution make it the simpler choice.