--- 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](https://github.com) | The most popular git hosting platform | | :icon{name="i-simple-icons-gitlab"} [GitLab](https://gitlab.com) | Self-hosted instances supported | | :icon{name="i-simple-icons-bitbucket"} [Bitbucket](https://bitbucket.org) | Atlassian's git hosting service | | :icon{name="i-simple-icons-codeberg"} [Codeberg](https://codeberg.org) | Free hosting for open source projects | | :icon{name="i-simple-icons-gitee"} [Gitee](https://gitee.com) | Popular git hosting in China | | :icon{name="i-simple-icons-sourcehut"} [Sourcehut](https://sr.ht) | Minimalist software forge | | :icon{name="i-simple-icons-forgejo"} [Forgejo](https://forgejo.org) | Community-driven Gitea fork | | :icon{name="i-simple-icons-gitea"} [Gitea](https://gitea.com) | Self-hosted git service | | [Radicle](https://radicle.xyz) | Peer-to-peer code collaboration | | [Tangled](https://tangled.sh) | 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](https://jsr.io), 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](https://stackblitz.com) | Browser-based IDE with instant environments | | :icon{name="i-simple-icons-codesandbox"} [CodeSandbox](https://codesandbox.io) | Online code editor and prototyping tool | | :icon{name="i-lucide:pen-tool"} [CodePen](https://codepen.io) | Social development environment for front-end | | :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net) | Online editor for web snippets | | :icon{name="i-simple-icons-replit"} [Replit](https://replit.com) | Collaborative browser-based IDE | ### Custom badges You can add custom npmx badges to your markdown files using the following syntax: ```md [![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 - **version**: Shows the latest or specific version of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} - **license**: Displays the package license (e.g., MIT, Apache-2.0). :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} - **size**: Shows the install size (via Bundlephobia) or unpacked size. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"} - **downloads**: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"} - **downloads-day**: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"} - **downloads-week**: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"} - **downloads-month**: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"} - **downloads-year**: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"} - **vulnerabilities**: Shows the number of vulnerabilities found via OSV. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **dependencies**: Lists the total count of package dependencies. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **created**: Displays the date the package was first published. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} - **updated**: Displays the date of the most recent modification. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} - **engines**: Shows the supported Node.js version range. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"} - **types**: Indicates if TypeScript types are included. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **quality**: NPMS.io quality score based on linting and tests. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"} - **popularity**: NPMS.io popularity score based on downloads and stars. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **maintenance**: NPMS.io maintenance score based on activity. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"} - **score**: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} #### Examples ```md # 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` |