Skip to content

1.features.md

Latest commit

 

History

History
209 lines (143 loc) · 11.5 KB

1.features.md

File metadata and controls

209 lines (143 loc) · 11.5 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

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

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)

# Endpoint Badge

[![Stage](https://npmx.dev/api/registry/badge/endpoint/_?url=https://raw.githubusercontent.com/solidjs-community/solid-primitives/af34b836baba599c525d0db4b1c9871dd0b13f27/assets/badges/stage-2.json)](https://github.com/solidjs-community/solid-primitives)

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
Example URL
Hot Pink .../badge/version/nuxt?colorB=ff69b4
Pure Black .../badge/version/nuxt?colorB=000000
Brand Blue .../badge/version/nuxt?colorB=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
style

Overrides the default badge appearance. Pass shieldsio to use the shields.io-compatible style.

  • Default: default
  • Usage: ?style=shieldsio