Profile
Back to NewsBack
GitHub Trending 6 min
Reader Mode
npmx-dev/npmx.dev: a fast, modern browser for the npm registry

npmx-dev/npmx.dev: a fast, modern browser for the npm registry

11 hours ago

npmx.dev

A fast, modern browser for the npm registry.

Screenshot of npmx.dev showing the nuxt package

Vision

The goal of npmx.dev is to build a fast, modern browser for the npm registry.

We're not replacing the npm registry, but instead providing an elevated developer experience through a fast, modern UI.

What npmx offers:

  • Speed – Fast searching, filtering, and navigation.
  • Simplicity – Get the information you need when you need it in an intuitive UI.
  • URL Compatibility – Replace npmjs.com with xnpmjs.com or npmx.dev in any URL and it just works.
  • First-class accessibility – Keyboard-friendly, screen-reader-aware experience baked in from the start.
  • Internationalized UI – Use npmx in dozens of locales, including RTL languages.
  • Enhanced admin experience – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
  • Shareable URLs – Every view on every page is shareable through the URL, making sharing a breeze.

Shortcuts

Features

Package browsing

  • Dark mode and light mode – plus customize the color palette to your preferences
  • Translated interface – localized UI across 39+ locales, including RTL support
  • First-class accessibility – accessible components, keyboard workflows, and automated axe/Lighthouse checks
  • URL-driven feature views – share exact package versions, search results, compare sets, source files and lines, diffs, docs, changelogs, stats and timelines
  • Fast search – quick package search with instant results
  • Package details – READMEs, versions, dependencies, and metadata
  • Code viewer – browse package source code with syntax highlighting and permalink to specific lines
  • Generated API docs – browse generated docs for typed packages when available
  • Version diff – inspect source and dependency changes between package versions
  • Changelog view – read release notes when packages publish them
  • Timeline view – scan publish history and notable version events such as deprecations and install size changes
  • Provenance indicators – verified build badges and provenance section below the README
  • Multi-provider repository support – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, Sourcehut, Forgejo, Gitea, Radicle, Tangled, and Pushin
  • JSR availability – see if scoped packages are also available on JSR
  • Package badges – module format (ESM/CJS/dual), TypeScript types (with @types/* links), and engine constraints
  • Outdated dependency indicators – visual cues showing which dependencies are behind
  • Vulnerability warnings – security advisories from the OSV database
  • License, replacement, install script, and size-change warnings – spot package health and maintenance signals quickly
  • Download statistics – weekly download counts with sparkline charts
  • Install size – total install size (including transitive dependencies)
  • Package comparison – compare packages by downloads, size, dependencies, types, security, repository health, and more
  • Social signals – like packages, view profile likes, and browse the most-liked packages leaderboard
  • Playground links – quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
  • Infinite search – auto-load additional search pages as you scroll
  • Keyboard navigation – press / to focus search, . to open code viewer, arrow keys to navigate results
  • Deprecation notices – clear warnings for deprecated packages and versions
  • Version range resolution – dependency ranges (e.g., ^1.0.0) resolve to actual installed versions
  • Claim new packages – register new package names directly from search results
  • Clickable version tags – navigate directly to any version from the versions list

User & org pages

  • User profiles – view any npm user's public packages at /~username
  • Organization pages – browse org packages at /@orgname
  • Package access and owner management – grant package access, revoke team access, and add/remove package owners
  • Organization member and team management – add/remove org members, change roles, create teams, and manage team membership
  • Search, filter & sort – find packages within user/org lists
  • Infinite scroll – paginated lists that load as you scroll

Comparison with npmjs.com

| Feature | npmjs.com | npmx.dev | | ----------------------------------- | :-------: | :------: | | Package search | ✅ | ✅ | | Package details & README | ✅ | ✅ | | Version history | ✅ | ✅ | | Dependencies list | ✅ | ✅ | | Dependents list | ✅ | 🚧 | | User profiles | ✅ | ✅ | | Organization pages | ✅ | ✅ | | Package comparison | ❌ | ✅ | | URL-driven/shareable feature views | ❌ | ✅ | | Provenance indicators | ✅ | ✅ | | Code browser | ✅ | ✅ | | Generated API docs | ❌ | ✅ | | Version diff | ❌ | ✅ | | Changelog view | ❌ | ✅ | | Timeline view | ❌ | ✅ | | Dark mode | ✅ 🆕 | ✅ | | Internationalization | ❌ | ✅ | | Accessibility statement and audits | ❌ | ✅ | | Outdated dependency warnings | ❌ | ✅ | | Module format badges (ESM/CJS/WASM) | ❌ | ✅ | | TypeScript types indicator | ✅ | ✅ | | Install size calculation | ❌ | ✅ | | Install script warnings | ❌ | ✅ | | License change warnings | ❌ | ✅ | | Module replacement suggestions | ❌ | ✅ | | JSR cross-reference | ❌ | ✅ | | Vulnerability warnings | ✅ | ✅ | | Deprecation notices | ✅ | ✅ | | Download charts | ✅ | ✅ | | Package likes and leaderboard | ❌ | ✅ | | Playground links | ❌ | ✅ | | Keyboard navigation | ❌ | ✅ | | Multi-provider repo support | ❌ | ✅ | | Version range resolution | ❌ | ✅ | | Package admin (access/owners) | ✅ | ✅ | | Org/team management | ✅ | ✅ | | 2FA/account settings | ✅ | ❌ | | Claim new package names | ✅ | ✅ |

🚧 = coming soon

URL structure

npm compatibility

npmx.dev supports npm permalinks – just replace npmjs.com with npmx.dev or xnpmjs.com to get the npmx experience:

| npm URL | npmx.dev equivalent | | ------------------------------- | ---------------------------------------------------------------------- | | npmjs.com/package/nuxt | npmx.dev/package/nuxt | | npmjs.com/package/@nuxt/kit | npmx.dev/package/@nuxt/kit | | npmjs.com/package/vue/v/3.4.0 | npmx.dev/package/vue/v/3.4.0 | | npmjs.com/search?q=vue | npmx.dev/search?q=vue | | npmjs.com/~sindresorhus | npmx.dev/~sindresorhus | | npmjs.com/org/nuxt | npmx.dev/org/nuxt |

[!TIP]
Want automatic redirects? Try the npmx-redirect extension for Chrome / Firefox.

Not yet supported

  • /package//access – dedicated npm-compatible access settings URL
  • /package//dependents – dependent packages list
  • /settings/* – account settings pages

Simpler URLs

npmx.dev also supports shorter, cleaner URLs:

| Pattern | Example | | ------------------ | -------------------------------------------------- | | / | /nuxt | | /@ | /[email protected] | | /@scope/name | /@nuxt/kit | | /@org | /@nuxt | | /~username | /~sindresorhus |

Tech stack

Contributing

We welcome contributions – please do feel free to explore the project and improve things. See CONTRIBUTING.md for guidelines on how to get up and running!

Related projects

  • npmx-redirect – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
  • JSR – The open-source package registry for modern JavaScript and TypeScript
  • npm-userscript – Browser userscript with various improvements and fixes for npmjs.com
  • npm-alt – An alternative npm package browser
  • npkg.lorypelli.dev – An alternative frontend to npm made with as little client-side JavaScript as possible
  • vscode-npmx – Official VSCode extension for npmx
  • vscode-open-in-npmx – VSCode shortcut to open packages on npmx
  • nxjt – npmx Jump To: Quickly navigate to npmx common webpages.
  • npmx-weekly – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on GitHub.
  • npmx-digest – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
  • npmx-badge – A playground to help you create custom badges quickly.
  • npmxers – Discover the number of contributions you made to npmx and share your npmxer profile.
If you're building something cool, let us know! 🙏

License

Made with ❤️

Published under MIT License.

Sponsors

Sponsors

Chat with me