davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1# npmx.dev
2
3> A fast, modern browser for the npm registry.
4
5<p align="center">
6 <a href="https://npmx.dev/">
7 <img width="1090" alt="Screenshot of npmx.dev showing the nuxt package" src="https://github.com/user-attachments/assets/1a2a3205-0227-46dc-b1f9-48f9a65691d3">
8 </a>
9</p>
10
11- [👉 Check it out](https://npmx.dev/)
12- [📖 About npmx](https://npmx.dev/about)
13
14## Vision
15
16The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern browser for the npm registry.
17
18We're not replacing the [npm](https://www.npmjs.com/) registry, but instead providing an elevated developer experience through a fast, modern UI.
19
20What npmx offers:
21
22- **Speed** – Fast searching, filtering, and navigation.
23- **Simplicity** – Get the information you need when you need it in an intuitive UI.
24- **URL Compatibility** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
25- **Enhanced admin experience** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
26
27## Shortcuts
28
29> [!IMPORTANT]
30> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npmx.dev). If you know others who would be interested, please invite them too!
31
32- [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
33- [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile
34- [repo.npmx.dev](https://repo.npmx.dev) - GitHub Repository
35- [issues.npmx.dev](https://issues.npmx.dev) - GitHub Issues
36- [coc.npmx.dev](https://coc.npmx.dev) - Code of Conduct
37- [contributing.npmx.dev](https://contributing.npmx.dev) - Contributing Guide
38
39## Features
40
41### Package browsing
42
43- **Dark mode and light mode** – plus customize the color palette to your preferences
44- **Fast search** – quick package search with instant results
45- **Package details** – READMEs, versions, dependencies, and metadata
46- **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines
47- **Provenance indicators** – verified build badges and provenance section below the README
48- **Multi-provider repository support** – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, Sourcehut, Forgejo, Gitea, Radicle, and Tangled
49- **JSR availability** – see if scoped packages are also available on JSR
50- **Package badges** – module format (ESM/CJS/dual), TypeScript types (with `@types/*` links), and engine constraints
51- **Outdated dependency indicators** – visual cues showing which dependencies are behind
52- **Vulnerability warnings** – security advisories from the OSV database
53- **Download statistics** – weekly download counts with sparkline charts
54- **Install size** – total install size (including transitive dependencies)
55- **Playground links** – quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
56- **Infinite search** – auto-load additional search pages as you scroll
57- **Keyboard navigation** – press `/` to focus search, `.` to open code viewer, arrow keys to navigate results
58- **Deprecation notices** – clear warnings for deprecated packages and versions
59- **Version range resolution** – dependency ranges (e.g., `^1.0.0`) resolve to actual installed versions
60- **Claim new packages** – register new package names directly from search results (via local connector)
61- **Clickable version tags** – navigate directly to any version from the versions list
62
63### User & org pages
64
65- **User profiles** – view any npm user's public packages at `/~username`
66- **Organization pages** – browse org packages at `/@orgname`
67- **Search, filter & sort** – find packages within user/org lists
68- **Infinite scroll** – paginated lists that load as you scroll
69
70### Comparison with npmjs.com
71
72| Feature | npmjs.com | npmx.dev |
73| ------------------------------ | :-------: | :------: |
74| Package search | ✅ | ✅ |
75| Package details & README | ✅ | ✅ |
76| Version history | ✅ | ✅ |
77| Dependencies list | ✅ | ✅ |
78| User profiles | ✅ | ✅ |
79| Organization pages | ✅ | ✅ |
80| Provenance indicators | ✅ | ✅ |
81| Code browser | ✅ | ✅ |
82| Dark mode | ❌ | ✅ |
83| Outdated dependency warnings | ❌ | ✅ |
84| Module format badges (ESM/CJS) | ❌ | ✅ |
85| TypeScript types indicator | ✅ | ✅ |
86| Install size calculation | ❌ | ✅ |
87| JSR cross-reference | ❌ | ✅ |
88| Vulnerability warnings | ✅ | ✅ |
89| Deprecation notices | ✅ | ✅ |
90| Download charts | ✅ | ✅ |
91| Playground links | ❌ | ✅ |
92| Keyboard navigation | ❌ | ✅ |
93| Multi-provider repo support | ❌ | ✅ |
94| Version range resolution | ❌ | ✅ |
95| Dependents list | ✅ | 🚧 |
96| Package admin (access/owners) | ✅ | 🚧 |
97| Org/team management | ✅ | 🚧 |
98| 2FA/account settings | ✅ | ❌ |
99| Claim new package names | ✅ | ✅ |
100
101🚧 = coming soon
102
103## URL structure
104
105### npm compatibility
106
107npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` to get the npmx experience:
108
109| npm URL | npmx.dev equivalent |
110| ------------------------------- | ---------------------------------------------------------------------- |
111| `npmjs.com/package/nuxt` | [`npmx.dev/package/nuxt`](https://npmx.dev/package/nuxt) |
112| `npmjs.com/package/@nuxt/kit` | [`npmx.dev/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
113| `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) |
114| `npmjs.com/search?q=vue` | [`npmx.dev/search?q=vue`](https://npmx.dev/search?q=vue) |
115| `npmjs.com/~sindresorhus` | [`npmx.dev/~sindresorhus`](https://npmx.dev/~sindresorhus) |
116| `npmjs.com/org/nuxt` | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt) |
117
118> [!TIP]
119> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) (Chrome only for now) or the separate [npmx-redirect extension](https://github.com/iaverages/npmx-redirect) for [Chrome](https://chromewebstore.google.com/detail/lbhjgfgpnlihfmobnohoipeljollhlnb) / [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/npmx-redirect/).
120
121#### Not yet supported
122
123- `/package/<name>/access` – package access settings
124- `/package/<name>/dependents` – dependent packages list
125- `/settings/*` – account settings pages
126
127### Simpler URLs
128
129npmx.dev also supports shorter, cleaner URLs:
130
131| Pattern | Example |
132| ------------------ | -------------------------------------------------- |
133| `/<package>` | [`/nuxt`](https://npmx.dev/nuxt) |
134| `/<pkg>@<version>` | [`/vue@3.4.0`](https://npmx.dev/vue@3.4.0) |
135| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit) |
136| `/@org` | [`/@nuxt`](https://npmx.dev/@nuxt) |
137| `/~username` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
138
139## Tech stack
140
141- [Nuxt 4](https://nuxt.com/)
142- [Nitro](https://nuxt.com/docs/guide/concepts/server-engine)
143- [UnoCSS](https://unocss.dev/)
144- [nuxt-og-image](https://github.com/nuxt-modules/og-image)
145- [npm Registry API](https://github.com/npm/registry/blob/main/docs/REGISTRY-API.md)
146
147## Contributing
148
149We welcome contributions – please do feel free to explore the project and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
150
151## Related projects
152
153- [npmx-replace-extension](https://github.com/tylersayshi/npmx-replace-extension) – Browser extension to redirect npmjs.com to npmx.dev (Chrome only for now)
154- [JSR](https://jsr.io/) – The open-source package registry for modern JavaScript and TypeScript
155- [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
156- [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
157- [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
158- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – Official VSCode extension for npmx
159- [vscode-open-in-npmx](https://github.com/sybers/vscode-open-in-npmx) – VSCode shortcut to open packages on npmx
160- [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
161- [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
162- [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
163- [npmx-redirect](https://github.com/iaverages/npmx-redirect) – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
164
165If you're building something cool, let us know! 🙏
166
167## License
168
169Made with ❤️
170
171Published under [MIT License](./LICENSE).
172
173## Star History
174
175<a href="https://www.star-history.com/#npmx-dev/npmx.dev&type=date&legend=top-left">
176 <picture>
177 <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&theme=dark&legend=top-left" />
178 <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&legend=top-left" />
179 <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&legend=top-left" />
180 </picture>
181</a>