MCPcopy
hub / github.com/npmx-dev/npmx.dev

github.com/npmx-dev/npmx.dev @v0.15.0 sqlite

repository ↗ · DeepWiki ↗ · release v0.15.0 ↗
1,474 symbols 4,084 edges 496 files 188 documented · 13%
README

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, 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, and Tangled
  • 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/<name>/access – dedicated npm-compatible access settings URL
  • /package/<name>/dependents – dependent packages list
  • /settings/* – account settings pages

Simpler URLs

npmx.dev also supports shorter, cleaner URLs:

Pattern Example
/<package> /nuxt
/<pkg>@<version> /vue@3.4.0
/@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.

If you're building something cool, let us know! 🙏

License

Made with ❤️

Published under MIT License.

Star History

Star History Chart

Extension points exported contracts — how you extend this code

CacheAdapter (Interface)
(no doc) [4 implementers]
server/utils/cache/shared.ts
WatermarkColors (Interface)
* Shared utilities for chart watermarks and legends in SVG/PNG exports
app/composables/useChartWatermark.ts
PackageWithMeta (Interface)
Package metadata needed for association validation
server/api/registry/analysis/[...pkg].get.ts
ISRConfigOptions (Interface)
(no doc)
nuxt.config.ts
AppConfig (Interface)
(no doc)
modules/build-env.ts
FixtureMatch (Interface)
(no doc)
modules/runtime/server/cache.ts
NpmProcessCommand (Interface)
(no doc)
cli/src/npm-process.ts
ConnectorFixtures (Interface)
(no doc)
test/e2e/helpers/fixtures.ts

Core symbols most depended-on inside this repo

get
called by 153
server/utils/cache/shared.ts
set
called by 84
server/utils/cache/shared.ts
renderReadmeHtml
called by 74
server/utils/readme.ts
useMarkdown
called by 50
app/composables/useMarkdown.ts
buildCompareScatterChartDataset
called by 40
app/utils/compare-scatter-chart.ts
isFacetSelected
called by 38
app/composables/useFacetSelection.ts
parseRepositoryInfo
called by 37
shared/utils/git-providers.ts
handleApiError
called by 35
server/utils/error-handler.ts

Shape

Function 1,083
Interface 253
Method 110
Class 28

Languages

TypeScript100%

Modules by API surface

cli/src/mock-state.ts41 symbols
cli/src/npm-client.ts32 symbols
test/fixtures/mock-routes.cjs27 symbols
shared/types/npm-registry.ts26 symbols
app/composables/useConnector.ts24 symbols
app/composables/useStructuredFilters.ts23 symbols
app/composables/useCharts.ts23 symbols
app/utils/charts.ts22 symbols
app/composables/useCommandPalette.ts22 symbols
server/api/registry/badge/[type]/[...pkg].get.ts21 symbols
server/utils/readme.ts20 symbols
shared/utils/package-analysis.ts18 symbols

Dependencies from manifests, versioned

@atcute/bluesky-richtext-segmenter3.0.0 · 1×
@atcute/tid1.1.2 · 1×
@atproto/api0.20.7 · 1×
@atproto/lex0.1.3 · 1×
@atproto/lex-password-session0.0.12 · 1×
@atproto/oauth-client-node0.3.15 · 1×
@clack/prompts1.0.1 · 1×
@deno/docjsr:^0.189.1 · 1×
@e18e/eslint-plugin0.4.1 · 1×
@floating-ui/vue1.1.11 · 1×
@iconify-json/lucide1.2.101 · 1×

For agents

$ claude mcp add npmx.dev \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact