npm

NPM Package Explorer

LOCAL · Browser-Only

Search npm packages, check bundle sizes, compare packages, and generate CDN links

Search npm packages

Search for an npm package

Type a package name above to explore its bundle size, CDN links, and metadata.

·Share recipe

Was this tool helpful?

What is NPM Package Explorer?

Free online NPM package explorer to explore npm packages with this all-in-one developer tool.

Search the npm registry to find packages, check the minified and gzipped bundle size of any package before you install it, and generate ready-to-use CDN links from unpkg, jsdelivr, esm.sh, and cdnjs. Copy HTML script tags, ES module imports, and install commands with one click. Compare two package versions to see how the size changed, find a lighter alternative, or grab a CDN URL to load a library without a build step. View package metadata including license, repository, homepage, and recent version history. All queries go directly from your browser to public APIs. No signup required.

How to Use NPM Package Explorer

1Type a package name in the search box to query the npm registry
2Click on a package from the search results to select it
3View bundle size information including minified size, gzipped size, and estimated download time
4Copy CDN links, HTML script tags, or ES module import statements with one click
5Click on version badges to switch between recent versions and compare sizes

Frequently Asked Questions

What is NPM Package Explorer?

NPM Package Explorer is a free online tool that lets you search the npm registry, check bundle sizes via Bundlephobia, generate CDN links from multiple providers, and view package metadata like license, versions, and repository links.

How is the bundle size calculated?

Bundle size data is fetched from the Bundlephobia API, which builds the package and measures both the minified and gzipped output sizes. The download time estimate is based on a slow 3G connection (approximately 50 KB/s).

Why is bundle size unavailable for some packages?

Bundlephobia may not have data for packages that contain native binaries, are very large, have complex build steps, or have never been queried before. The tool will show a friendly message when data is unavailable.

Which CDN providers are supported?

The tool generates links for four popular CDN providers: unpkg, jsdelivr, esm.sh, and cdnjs. Each serves npm packages over a global CDN with HTTPS support.

Is my data sent to any server?

All API calls go directly from your browser to the public npm registry and Bundlephobia APIs. No data passes through any intermediate server.

How do I check a package's size before installing it?

Search for the package by name and select it from the results. The tool shows the minified and gzipped size along with an estimated download time, so you can judge the cost of adding it to your bundle before running npm install. Click a version badge to see how the size differs across recent releases.

How do I load an npm package from a CDN without a build step?

Select the package, then copy one of the generated CDN links from unpkg, jsdelivr, esm.sh, or cdnjs. Use the HTML script tag for a classic global script, or the ES module import URL for modern browsers that support native modules. This lets you prototype with a library directly in a single HTML file.

Can I find a lighter alternative to a heavy package?

Use the size figures to compare candidates side by side. Look up the package you currently use, note its gzipped size, then search for the alternatives you are considering and compare. Smaller gzipped size usually means faster page loads, though you should still check that the lighter package covers the features you need.

Share this tool

Related Tools

🧭

Can i use alternative

Free online browser feature support - check CSS and HTML feature browser compatibility

📊

GitHub Repo Stats

Free online github repo stats - view repository statistics, badges, and activity charts

JWT

JWT Decoder

Free online JWT decoder - decode and inspect JSON Web Tokens without sending them to a server

Bug spotter

Paste code and find potential bugs, security issues, and improvements using a local AI

📋

Changelog Generator

Generate changelogs in Keep a Changelog format - version entries, semver, and diff links

📷

View exif data

Free online EXIF data viewer - view and strip EXIF metadata from photos for privacy

Emoji keyboard

Free online emoji picker - search, browse, and copy emojis to your clipboard instantly

#.a

Css selector priority

Free online CSS specificity calculator - calculate and compare CSS selector specificity scores instantly

Keep reading: HTML Cheat Sheet and working without uploading reference. Doing this in code instead? See the JSON and data endpoints.

What is NPM Package Explorer?

Free online NPM package explorer to explore npm packages with this all-in-one developer tool.

How to Use NPM Package Explorer

1Type a package name in the search box to query the npm registry

2Click on a package from the search results to select it

3View bundle size information including minified size, gzipped size, and estimated download time

4Copy CDN links, HTML script tags, or ES module import statements with one click

5Click on version badges to switch between recent versions and compare sizes

Frequently Asked Questions

What is NPM Package Explorer?

How is the bundle size calculated?

Why is bundle size unavailable for some packages?

Which CDN providers are supported?

The tool generates links for four popular CDN providers: unpkg, jsdelivr, esm.sh, and cdnjs. Each serves npm packages over a global CDN with HTTPS support.

Is my data sent to any server?

All API calls go directly from your browser to the public npm registry and Bundlephobia APIs. No data passes through any intermediate server.