davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1---
2title: Features
3description: Explore all the features npmx.dev offers
4navigation:
5 icon: i-lucide:sparkles
6---
7
8npmx.dev provides a comprehensive set of features for browsing npm packages.
9
10## Browse packages
11
12### View package details
13
14Each package page displays:
15
16- **README** - Rendered markdown documentation
17- **Versions** - Complete version history with release dates
18- **Dependencies** - Required packages with version ranges that resolve to actual versions
19- **Dependents** - Packages that depend on this one (coming soon)
20
21### Check package badges
22
23Packages display helpful badges:
24
25| Badge | Meaning |
26| ---------------- | ----------------------------------------------------------- |
27| ESM / CJS / Dual | Module format support |
28| TypeScript | Includes type definitions (links to `@types/*` if separate) |
29| Provenance | Verified build from a known source |
30
31### View security information
32
33- **Vulnerability warnings** - Security advisories from the OSV database
34- **Deprecation notices** - Clear warnings for deprecated packages and versions
35- **Provenance indicators** - Verified build badges for packages with npm provenance
36
37## Browse source code
38
39Press `.` or click the **Code** tab to open the code viewer:
40
41- **File tree** - Navigate the package structure
42- **Syntax highlighting** - Language-aware code display
43- **Permalinks** - Link to specific lines in files
44
45## View statistics
46
47- **Download counts** - Weekly downloads with sparkline charts
48- **Install size** - Total size including transitive dependencies
49- **Repository stats** - Stars and forks from supported git providers
50
51### Supported git providers
52
53npmx.dev fetches repository statistics (stars, forks) from these git hosting platforms:
54
55| Provider | Description |
56| ------------------------------------------------------------------------- | ------------------------------------- |
57| :icon{name="i-simple-icons-github"} [GitHub](https://github.com) | The most popular git hosting platform |
58| :icon{name="i-simple-icons-gitlab"} [GitLab](https://gitlab.com) | Self-hosted instances supported |
59| :icon{name="i-simple-icons-bitbucket"} [Bitbucket](https://bitbucket.org) | Atlassian's git hosting service |
60| :icon{name="i-simple-icons-codeberg"} [Codeberg](https://codeberg.org) | Free hosting for open source projects |
61| :icon{name="i-simple-icons-gitee"} [Gitee](https://gitee.com) | Popular git hosting in China |
62| :icon{name="i-simple-icons-sourcehut"} [Sourcehut](https://sr.ht) | Minimalist software forge |
63| :icon{name="i-simple-icons-forgejo"} [Forgejo](https://forgejo.org) | Community-driven Gitea fork |
64| :icon{name="i-simple-icons-gitea"} [Gitea](https://gitea.com) | Self-hosted git service |
65| [Radicle](https://radicle.xyz) | Peer-to-peer code collaboration |
66| [Tangled](https://tangled.sh) | Decentralized git hosting |
67
68## Explore users and organizations
69
70- **User profiles** - View any npm user's public packages at `/~username`
71- **Organization pages** - Browse org packages at `/@orgname`
72- **Search and filter** - Find packages within user/org lists
73
74## Access related resources
75
76### :icon{name="i-simple-icons-jsr"} JSR availability
77
78See if scoped packages are also available on [JSR](https://jsr.io), the modern JavaScript registry with native TypeScript support.
79
80### Playground links
81
82Quick access to online development environments detected from package READMEs:
83
84| Platform | Description |
85| ------------------------------------------------------------------------------ | -------------------------------------------- |
86| :icon{name="i-simple-icons-stackblitz"} [StackBlitz](https://stackblitz.com) | Browser-based IDE with instant environments |
87| :icon{name="i-simple-icons-codesandbox"} [CodeSandbox](https://codesandbox.io) | Online code editor and prototyping tool |
88| :icon{name="i-lucide:pen-tool"} [CodePen](https://codepen.io) | Social development environment for front-end |
89| :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net) | Online editor for web snippets |
90| :icon{name="i-simple-icons-replit"} [Replit](https://replit.com) | Collaborative browser-based IDE |
91
92### Custom badges
93
94You can add custom npmx badges to your markdown files using the following syntax:
95
96```md
97[](https://npmx.dev/package/YOUR_PACKAGE)
98```
99
100::tip
101Make 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`).
102::
103
104#### Available Badge Types
105
106- **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"}
107- **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"}
108- **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"}
109- **downloads**: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
110- **downloads-day**: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
111- **downloads-week**: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
112- **downloads-month**: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
113- **downloads-year**: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
114- **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"}
115- **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"}
116- **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"}
117- **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"}
118- **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"}
119- **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"}
120- **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"}
121- **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"}
122- **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"}
123- **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"}
124- **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"}
125- **score**: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
126- **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
127
128#### Examples
129
130```md
131# Version Badge
132
133[](https://npmx.dev/package/nuxt)
134
135# License Badge
136
137[](https://npmx.dev/package/vue)
138
139# Monthly Downloads
140
141[](https://npmx.dev/package/lodash)
142
143# Scoped Package (Install Size)
144
145[](https://npmx.dev/package/@nuxt/kit)
146
147# Specific Version
148
149[](https://npmx.dev/package/react)
150
151# Quality Score
152
153[](https://npmx.dev/package/pinia)
154```
155
156#### Customization Parameters
157
158You can further customize your badges by appending query parameters to the badge URL.
159
160##### `labelColor`
161
162Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix).
163
164- **Default**: `#0a0a0a`
165- **Usage**: `?labelColor=HEX_CODE`
166
167##### `label`
168
169Overrides the default label text. You can pass any string to customize the label displayed on the badge.
170
171- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
172- **Usage**: `?label=YOUR_LABEL`
173
174##### `color`
175
176Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
177
178- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
179- **Usage**: `?color=HEX_CODE`
180
181| Example | URL |
182| :------------- | :------------------------------------- |
183| **Hot Pink** | `.../badge/version/nuxt?colorB=ff69b4` |
184| **Pure Black** | `.../badge/version/nuxt?colorB=000000` |
185| **Brand Blue** | `.../badge/version/nuxt?colorB=3b82f6` |
186
187##### `name`
188
189When 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.
190
191- **Default**: `false`
192- **Usage**: `?name=true`
193
194| Type | Default Label | With `name=true` |
195| ------------- | -------------------- | ---------------- |
196| **Version** | `version \| 3.12.0` | `nuxt \| 3.12.0` |
197| **Downloads** | `downloads/mo \| 2M` | `lodash \| 2M` |