title: Features description: Explore all the features npmx.dev offers navigation: icon: i-lucide:sparkles#

npmx.dev provides a comprehensive set of features for browsing npm packages.

Browse packages#

View package details#

Each package page displays:

• README - Rendered markdown documentation
• Versions - Complete version history with release dates
• Dependencies - Required packages with version ranges that resolve to actual versions
• Dependents - Packages that depend on this one (coming soon)

Check package badges#

Packages display helpful badges:

View security information#

• Vulnerability warnings - Security advisories from the OSV database
• Deprecation notices - Clear warnings for deprecated packages and versions
• Provenance indicators - Verified build badges for packages with npm provenance

Browse source code#

Press . or click the Code tab to open the code viewer:

• File tree - Navigate the package structure
• Syntax highlighting - Language-aware code display
• Permalinks - Link to specific lines in files

View statistics#

• Download counts - Weekly downloads with sparkline charts
• Install size - Total size including transitive dependencies
• Repository stats - Stars and forks from supported git providers

Supported git providers#

npmx.dev fetches repository statistics (stars, forks) from these git hosting platforms:

Explore users and organizations#

• User profiles - View any npm user's public packages at /~username
• Organization pages - Browse org packages at /@orgname
• Search and filter - Find packages within user/org lists

Access related resources#

:icon{name="i-simple-icons-jsr"} JSR availability#

See if scoped packages are also available on JSR, the modern JavaScript registry with native TypeScript support.

Playground links#

Quick access to online development environments detected from package READMEs:

Custom badges#

You can add custom npmx badges to your markdown files using the following syntax:

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/TYPE/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)

::tip Make sure to replace TYPE with one of the options listed below and YOUR_PACKAGE with the actual package name (e.g., vue, lodash, or @nuxt/kit). ::

Available Badge Types#

• version: Shows the latest or specific version of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
• license: Displays the package license (e.g., MIT, Apache-2.0). :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"}
• size: Shows the install size (via Bundlephobia) or unpacked size. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
• downloads: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
• downloads-day: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
• downloads-week: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
• downloads-month: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
• downloads-year: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
• vulnerabilities: Shows the number of vulnerabilities found via OSV. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
• dependencies: Lists the total count of package dependencies. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
• created: Displays the date the package was first published. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
• updated: Displays the date of the most recent modification. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
• engines: Shows the supported Node.js version range. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
• types: Indicates if TypeScript types are included. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
• maintainers: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
• deprecated: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
• quality: NPMS.io quality score based on linting and tests. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
• popularity: NPMS.io popularity score based on downloads and stars. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
• maintenance: NPMS.io maintenance score based on activity. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
• score: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
• name: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}

Examples#

# Version Badge

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)

# License Badge

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/license/vue)](https://npmx.dev/package/vue)

# Monthly Downloads

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads/lodash)](https://npmx.dev/package/lodash)

# Scoped Package (Install Size)

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)

# Specific Version

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/react/v/18.0.0)](https://npmx.dev/package/react)

# Quality Score

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/quality/pinia)](https://npmx.dev/package/pinia)

Customization Parameters#

You can further customize your badges by appending query parameters to the badge URL.

labelColor#

Overrides the default label color. You can pass a standard hex code (with or without the # prefix).

• Default: #0a0a0a
• Usage: ?labelColor=HEX_CODE

label#

Overrides the default label text. You can pass any string to customize the label displayed on the badge.

• Default: Depends on the badge type (e.g., "version", "downloads/mo").
• Usage: ?label=YOUR_LABEL

color#

Overrides the default strategy color. You can pass a standard hex code (with or without the # prefix).

• Default: Depends on the badge type (e.g., version is blue, downloads are orange).
• Usage: ?color=HEX_CODE

name#

When set to true, this parameter replaces the static category label (like "version" or "downloads/mo") with the actual name of the package. This is useful for brand-focused READMEs.

• Default: false
• Usage: ?name=true