Skip to content

1.features.md

Latest commit

 

History

History
291 lines (209 loc) · 15.9 KB

1.features.md

File metadata and controls

291 lines (209 loc) · 15.9 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, 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:

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

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

: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

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

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)

::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)

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

Keyboard shortcuts

Shortcut Action
/ Focus search input or navigate to search
? Hold to reveal keyboard shortcut hints
. Open code viewer from package page
d Open docs from package page
c Open compare from package page
, Navigate to settings
Escape Go back from settings
Arrow keys Navigate search results
Enter Select highlighted search result