Skip to content

1.features.md

Latest commit

 

History

History
180 lines (126 loc) · 9.57 KB

1.features.md

File metadata and controls

180 lines (126 loc) · 9.57 KB
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:

Badge Meaning
ESM / CJS / Dual Module format support
TypeScript Includes type definitions (links to @types/* if separate)
Provenance Verified build from a known source

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:

Provider Description
:icon{name="i-simple-icons-github"} GitHub The most popular git hosting platform
:icon{name="i-simple-icons-gitlab"} GitLab Self-hosted instances supported
:icon{name="i-simple-icons-bitbucket"} Bitbucket Atlassian's git hosting service
:icon{name="i-simple-icons-codeberg"} Codeberg Free hosting for open source projects
:icon{name="i-simple-icons-gitee"} Gitee Popular git hosting in China
:icon{name="i-simple-icons-sourcehut"} Sourcehut Minimalist software forge
:icon{name="i-simple-icons-forgejo"} Forgejo Community-driven Gitea fork
:icon{name="i-simple-icons-gitea"} Gitea Self-hosted git service
Radicle Peer-to-peer code collaboration
Tangled Decentralized git hosting

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:

Platform Description
:icon{name="i-simple-icons-stackblitz"} StackBlitz Browser-based IDE with instant environments
:icon{name="i-simple-icons-codesandbox"} CodeSandbox Online code editor and prototyping tool
:icon{name="i-lucide-pen-tool"} CodePen Social development environment for front-end
:icon{name="i-simple-icons-jsfiddle"} JSFiddle Online editor for web snippets
:icon{name="i-simple-icons-replit"} Replit Collaborative browser-based IDE
:icon{name="i-simple-icons-gitpod"} Gitpod Cloud development environments

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)

Important

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.
  • 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.

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
Example URL
Hot Pink .../badge/version/nuxt?color=ff69b4
Pure Black .../badge/version/nuxt?color=000000
Brand Blue .../badge/version/nuxt?color=3b82f6
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
Type Default Label With name=true
Version version | 3.12.0 nuxt | 3.12.0
Downloads downloads/mo | 2M lodash | 2M