forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
docs: update features + add comparison with npmjs.com
+95
-62
+11
CONTRIBUTING.md
+11
CONTRIBUTING.md
···
92
92
> [!TIP]
93
93
> For more about the meaning of these directories, check out the docs on the [Nuxt directory structure](https://nuxt.com/docs/4.x/directory-structure).
94
94
95
+
### Local connector CLI
96
+
97
+
The `cli/` workspace contains a local connector that enables authenticated npm operations from the web UI. It runs on your machine and uses your existing npm credentials.
98
+
99
+
```bash
100
+
# run the connector from the root of the repository
101
+
pnpm npmx-connector
102
+
```
103
+
104
+
The connector will check your npm authentication, generate a connection token, and listen for requests from npmx.dev.
105
+
95
106
## Code style
96
107
97
108
### Typescript
+84
-62
README.md
+84
-62
README.md
···
12
12
13
13
## Vision
14
14
15
-
The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the npm registry - fast, accessible, and designed for power users.
15
+
The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the npm registry – fast, accessible, and designed for power users. We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI and DX.
16
16
17
-
- **Speed first** - Insanely fast searching, filtering, and navigation.
18
-
- **URL compatible** - Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
19
-
- **Provenance aware** - See at a glance which packages have verified build provenance.
17
+
- **Speed first** – Layout shift, flakiness, slowness is The Worst. Fast searching, filtering, and navigation.
18
+
- **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
19
+
- **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
20
20
21
21
## Features
22
22
23
-
- **Dark mode by default** - easier on the eyes
24
-
- **Package browsing** - fast search, package details, READMEs, versions, dependencies
25
-
- **User profiles** - view any npm user's public packages at `/~username`
26
-
- **Organization pages** - browse org packages at `/org/orgname`
27
-
- **Provenance indicators** - verified build indicators for packages with npm provenance
28
-
- **Admin features** - org/team management, package access controls via local connector (coming soon)
23
+
### Package browsing
29
24
30
-
### URL compatibility
25
+
- **Dark mode by default** – easier on the eyes
26
+
- **Fast search** – quick package search with instant results
27
+
- **Package details** – READMEs, versions, dependencies, and metadata
28
+
- **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines
29
+
- **Provenance indicators** – verified build badges for packages with npm provenance
30
+
- **JSR availability** – see if scoped packages are also available on JSR
31
+
- **Package badges** – module format (ESM/CJS/dual), TypeScript types, and engine constraints
32
+
- **Outdated dependency indicators** – visual cues showing which dependencies are behind
33
+
- **Vulnerability warnings** – security advisories from the OSV database
34
+
- **Download statistics** – weekly download counts with sparkline charts
35
+
- **Install size** – total install size including dependencies
36
+
- **Infinite search** – auto-load additional search pages as you scroll
31
37
32
-
npmx.dev supports npm permalink patterns:
38
+
### User & org pages
33
39
34
-
| Pattern | Example |
35
-
| ----------------------------- | -------------------------------------------------------------- |
36
-
| `/package/<name>` | [`/package/nuxt`](https://npmx.dev/package/nuxt) |
37
-
| `/package/@scope/name` | [`/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
38
-
| `/package/<name>/v/<version>` | [`/package/vue/v/3.4.0`](https://npmx.dev/package/vue/v/3.4.0) |
39
-
| `/search?q=<query>` | [`/search?q=vue`](https://npmx.dev/search?q=vue) |
40
-
| `/~<username>` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
41
-
| `/org/<name>` | [`/org/nuxt`](https://npmx.dev/org/nuxt) |
40
+
- **User profiles** – view any npm user's public packages at `/~username`
41
+
- **Organization pages** – browse org packages at `/@orgname`
42
+
- **Search, filter & sort** – find packages within user/org lists
43
+
- **Infinite scroll** – paginated lists that load as you scroll
42
44
43
-
## Tech stack
44
-
45
-
- [Nuxt 4](https://nuxt.com/)
46
-
- [Nitro](https://nuxt.com/docs/guide/concepts/server-engine)
47
-
- [UnoCSS](https://unocss.dev/)
48
-
- [nuxt-og-image](https://github.com/nuxt-modules/og-image)
49
-
- [npm Registry API](https://github.com/npm/registry/blob/main/docs/REGISTRY-API.md)
45
+
### Comparison with npmjs.com
50
46
51
-
## Try it out locally
47
+
| Feature | npmjs.com | npmx.dev |
48
+
| ------------------------------ | :-------: | :------: |
49
+
| Package search | ✅ | ✅ |
50
+
| Package details & README | ✅ | ✅ |
51
+
| Version history | ✅ | ✅ |
52
+
| Dependencies list | ✅ | ✅ |
53
+
| User profiles | ✅ | ✅ |
54
+
| Organization pages | ✅ | ✅ |
55
+
| Provenance indicators | ✅ | ✅ |
56
+
| Code browser | ✅ | ✅ |
57
+
| Dark mode | ❌ | ✅ |
58
+
| Outdated dependency warnings | ❌ | ✅ |
59
+
| Module format badges (ESM/CJS) | ❌ | ✅ |
60
+
| TypeScript types indicator | ✅ | ✅ |
61
+
| Install size calculation | ❌ | ✅ |
62
+
| JSR cross-reference | ❌ | ✅ |
63
+
| Vulnerability warnings | ✅ | ✅ |
64
+
| Download charts | ✅ | ✅ |
65
+
| Dependents list | ✅ | 🚧 |
66
+
| Package admin (access/owners) | ✅ | 🚧 |
67
+
| Org/team management | ✅ | 🚧 |
68
+
| 2FA/account settings | ✅ | ❌ |
69
+
| Publishing packages | ✅ | ❌ |
52
70
53
-
I'd welcome contributions – please do feel free to poke around and improve things. Here's how you can get going locally.
71
+
🚧 = coming soon
54
72
55
-
### Setup
73
+
## URL structure
56
74
57
-
```bash
58
-
# install dependencies
59
-
corepack enable
60
-
pnpm install
75
+
### npm compatibility
61
76
62
-
# serve in dev mode, with hot reload at localhost:3000
63
-
pnpm dev
77
+
npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` and it works:
64
78
65
-
# build for production
66
-
pnpm build
79
+
| npm URL | npmx.dev equivalent |
80
+
| ------------------------------- | ---------------------------------------------------------------------- |
81
+
| `npmjs.com/package/nuxt` | [`npmx.dev/package/nuxt`](https://npmx.dev/package/nuxt) |
82
+
| `npmjs.com/package/@nuxt/kit` | [`npmx.dev/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
83
+
| `npmjs.com/package/vue/v/3.4.0` | [`npmx.dev/package/vue/v/3.4.0`](https://npmx.dev/package/vue/v/3.4.0) |
84
+
| `npmjs.com/search?q=vue` | [`npmx.dev/search?q=vue`](https://npmx.dev/search?q=vue) |
85
+
| `npmjs.com/~sindresorhus` | [`npmx.dev/~sindresorhus`](https://npmx.dev/~sindresorhus) |
86
+
| `npmjs.com/org/nuxt` | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt) |
67
87
68
-
# preview in production mode
69
-
pnpm preview
70
-
```
88
+
> [!TIP]
89
+
> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension).
71
90
72
-
### Testing
91
+
#### Not yet supported
73
92
74
-
```bash
75
-
# run all tests
76
-
pnpm test
93
+
- `/package/<name>/access` – package access settings
94
+
- `/package/<name>/dependents` – dependent packages list
95
+
- `/settings/*` – account settings pages
77
96
78
-
# run unit tests
79
-
pnpm test:unit
97
+
### Simpler URLs
80
98
81
-
# run e2e tests
82
-
pnpm test:browser
99
+
npmx.dev also supports shorter, cleaner URLs:
83
100
84
-
# type check
85
-
pnpm test:types
86
-
```
101
+
| Pattern | Example |
102
+
| -------------- | -------------------------------------------------- |
103
+
| `/<package>` | [`/nuxt`](https://npmx.dev/nuxt) |
104
+
| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit) |
105
+
| `/@org` | [`/@nuxt`](https://npmx.dev/@nuxt) |
106
+
| `/~username` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
87
107
88
-
### Local connector (CLI)
108
+
## Tech stack
89
109
90
-
The `cli/` workspace contains a local connector that enables authenticated npm operations from the web UI. It runs on your machine and uses your existing npm credentials.
110
+
- [Nuxt 4](https://nuxt.com/)
111
+
- [Nitro](https://nuxt.com/docs/guide/concepts/server-engine)
112
+
- [UnoCSS](https://unocss.dev/)
113
+
- [nuxt-og-image](https://github.com/nuxt-modules/og-image)
114
+
- [npm Registry API](https://github.com/npm/registry/blob/main/docs/REGISTRY-API.md)
91
115
92
-
```bash
93
-
# run the connector from the root of the repository
94
-
pnpm npmx-connector
95
-
```
116
+
## Contributing
96
117
97
-
The connector will check your npm authentication, generate a connection token, and listen for requests from npmx.dev.
118
+
I'd welcome contributions – please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
98
119
99
120
## Related projects
100
121
101
-
- [JSR](https://jsr.io/) - The open-source package registry for modern JavaScript and TypeScript
102
-
- [npm-userscript](https://github.com/bluwy/npm-userscript) - Browser userscript with various improvements and fixes for npmjs.com
103
-
- [npm-alt](https://npm.willow.sh/) - An alternative npm package browser
122
+
- [npmx-replace-extension](https://github.com/tylersayshi/npmx-replace-extension) – Browser extension to redirect npmjs.com to npmx.dev
123
+
- [JSR](https://jsr.io/) – The open-source package registry for modern JavaScript and TypeScript
124
+
- [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
125
+
- [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
104
126
105
127
If you're building something cool, let me know! 🙏
106
128