Features

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

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)

Available Badge Types

• version: Shows the latest or specific version of the package.
• license: Displays the package license (e.g., MIT, Apache-2.0).
• size: Shows the install size (via Bundlephobia) or unpacked size.
• downloads: Displays monthly download statistics.
• downloads-day: Displays daily download statistics.
• downloads-week: Displays weekly download statistics.
• downloads-month: Alias for monthly download statistics.
• downloads-year: Displays yearly download statistics.
• vulnerabilities: Shows the number of vulnerabilities found via OSV. /
• dependencies: Lists the total count of package dependencies.
• created: Displays the date the package was first published.
• updated: Displays the date of the most recent modification.
• engines: Shows the supported Node.js version range.
• types: Indicates if TypeScript types are included. /
• maintainers: Displays the total count of package maintainers.
• deprecated: Shows if the package is active or deprecated. /
• quality: NPMS.io quality score based on linting and tests.
• popularity: NPMS.io popularity score based on downloads and stars.
• maintenance: NPMS.io maintenance score based on activity.
• score: The overall NPMS.io combined score.
• name: Simple badge displaying the package name.

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