Features

npmx.dev provides a comprehensive set of features for browsing, analyzing, and administering npm packages.

Browse packages

View package details

Each package page displays:

• README - Rendered markdown with table of contents, active section tracking, and copy-as-markdown
• Description - With inline markdown rendering
• Versions - Complete version history grouped by dist-tags (latest, next, beta, etc.)
• Dependencies - Required packages with version range resolution to actual versions, outdated indicators, and vulnerability/deprecation analysis across the full dependency tree
• Install command - Multi-package-manager support: npm, pnpm, yarn, bun, deno, and vlt (with JSR support for scoped packages)

Check package badges

Packages display helpful badges:

View security information

• Vulnerability warnings - Security advisories from the OSV database, including transitive dependency scanning
• Deprecated dependency tree - Shows deprecated packages across the full dependency tree
• Deprecation notices - Clear warnings for deprecated packages and versions
• Provenance indicators - Verified build badges with full attestation details
• Install scripts warning - Alerts for packages with lifecycle scripts (postinstall, preinstall, etc.)
• Security downgrade detection - Warns when the latest version loses provenance or trusted publishing
• Module replacement suggestions - Links to better alternatives for known problematic packages

View statistics

• Download counts - Weekly downloads with sparkline charts
• Download chart - Interactive full chart with zoom, date range selection, and multiple granularities (daily/weekly/monthly/yearly)
• Version distribution - Chart showing download distribution across package versions
• Install size - Total size including transitive dependencies
• Repository stats - Stars and forks from supported git providers
• Like counts - Social engagement via ATProto/Bluesky integration

Browse source code

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

• File tree - Navigate the package structure (sidebar on desktop, drawer on mobile)
• Syntax highlighting - Language-aware code display via Shiki
• Line permalinks - Link to specific lines (#L10) or ranges (#L10-L20)
• Line range selection - Click + Shift-click for multi-line selection
• Markdown preview - Toggle between rendered and source view for .md files
• Raw file access - Download files via jsDelivr CDN
• Keyboard shortcut - Press . from any package page

View auto-generated API documentation

Press d or click the Docs tab for auto-generated documentation:

• Type-aware docs - Generated from published TypeScript types
• Supports - Functions, classes, interfaces, type aliases, variables, enums, namespaces
• Rich display - Syntax-highlighted signatures, parameters, return types
• JSDoc rendering - @example blocks, @deprecated warnings, @see references
• TOC sidebar - Navigate long documentation

Compare packages

Navigate to /compare or press c from a package page:

• Side-by-side comparison - Up to 4 packages at once
• Facet-based grid - Compare downloads, size, last updated, and more
• Download trends overlay - Overlaid line chart for download history
• Replacement suggestions - Module replacement recommendations
• URL-synced - Share comparison links (/compare?packages=a,b,c)

Explore users and organizations

• User profiles - View any npm user's public packages at /~username, with filtering, sorting, and total weekly downloads
• Organization pages - Browse org packages at /@orgname with full search and filtering
• Admin panels - When connected via the local connector, manage org members and teams

Search and discover

• Dual search providers - Choose between npm registry API and Algolia for faster results
• Instant results - Autocomplete suggestions as you type
• Rich result cards - Version, description, downloads, date, keywords, deprecation status
• Sorting - By popularity, quality, maintenance, or optimal
• View modes - Card and table layouts with customizable columns
• Infinite scroll - Auto-load additional results as you scroll
• Keyboard navigation - Arrow keys to navigate, Enter to select, / to focus
• Package name availability - Check and claim available package names
• OpenSearch - Search directly from the browser address bar

Customize your experience

Appearance

• Theme - System, light, or dark mode
• Accent colors - Multiple color options
• Background themes - Various background patterns

Display preferences

• Relative dates - Toggle between relative and absolute dates
• Search provider - Choose npm or Algolia
• Language - 29 locales including RTL (Arabic) with translation coverage tracking
• Package manager - Default install command format

Administer packages

Admin features work via a local "connector" CLI that uses your existing npm credentials:

• Package access - Manage read/write permissions
• Maintainers - Add/remove package owners
• Org members - Add/remove organization members
• Teams - Create/destroy teams, manage membership
• Team access - Grant/revoke team access to packages
• Claim packages - Register new package names
• Bulk operations - Queue multiple changes, review the plan, then apply all at once

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:

Supported git providers

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

Social features

npmx.dev integrates with the AT Protocol (Bluesky) for social features:

• Like packages - Express appreciation for packages you use
• Bluesky comments - View discussions about packages from the Bluesky network
• Social login - Authenticate with your ATProto identity

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

Keyboard shortcuts