···11+title: Getting Started
22+icon: i-lucide-rocket
+33
docs/content/1.getting-started/1.introduction.md
···11+---
22+title: Introduction
33+description: Learn what npmx.dev is and why you should use it
44+navigation:
55+ icon: i-lucide-house
66+---
77+88+npmx.dev provides a better way to browse the npm registry.
99+1010+## What is npmx.dev?
1111+1212+npmx.dev is a fast, modern browser for the npm registry. It doesn't aim to replace [npmjs.com](https://www.npmjs.com/), but provides a better UI and developer experience for browsing packages, viewing documentation, and exploring code.
1313+1414+## What you can do
1515+1616+- **Search packages** - Quick package search with instant results and infinite scroll
1717+- **Browse source code** - View package source code with syntax highlighting
1818+- **Check security** - See vulnerability warnings and provenance indicators
1919+- **Use familiar URLs** - Replace npmjs.com with npmx.dev in any URL
2020+2121+## When to use npmx.dev
2222+2323+Use npmx.dev when you want to:
2424+2525+- Quickly find and evaluate npm packages
2626+- Browse package source code without downloading
2727+- Check package security and provenance
2828+- View package metadata in a clean, dark-mode interface
2929+- Navigate with keyboard shortcuts
3030+3131+::note
3232+This documentation includes AI integration with MCP server (`/mcp`) and automatic `llms.txt` generation.
3333+::
+48
docs/content/1.getting-started/2.quick-start.md
···11+---
22+title: Quick Start
33+description: Start using npmx.dev in seconds
44+navigation:
55+ icon: i-lucide-zap
66+---
77+88+npmx.dev works in your browser with no installation required.
99+1010+## Open npmx.dev
1111+1212+Visit [npmx.dev](https://npmx.dev) to start browsing packages.
1313+1414+## Search for a package
1515+1616+1. Press `/` to focus the search bar (or click it)
1717+2. Type a package name
1818+3. Use arrow keys to navigate results
1919+4. Press `Enter` to view the package
2020+2121+## View package details
2222+2323+Each package page shows:
2424+2525+- **README** - Package documentation
2626+- **Versions** - All published versions with release dates
2727+- **Dependencies** - Required packages with version ranges
2828+- **Metadata** - License, repository, maintainers, and more
2929+3030+## Browse source code
3131+3232+1. Click the **Code** tab or press `.`
3333+2. Navigate the file tree
3434+3. Click any file to view its contents with syntax highlighting
3535+3636+## Use npm URLs
3737+3838+Replace `npmjs.com` with `npmx.dev` in any npm URL:
3939+4040+| npm URL | npmx.dev equivalent |
4141+| ----------------------------- | ---------------------------- |
4242+| `npmjs.com/package/nuxt` | `npmx.dev/package/nuxt` |
4343+| `npmjs.com/package/@nuxt/kit` | `npmx.dev/package/@nuxt/kit` |
4444+| `npmjs.com/~sindresorhus` | `npmx.dev/~sindresorhus` |
4545+4646+::tip
4747+Install the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) for automatic redirects from npmjs.com.
4848+::
···11+---
22+title: Features
33+description: Explore all the features npmx.dev offers
44+navigation:
55+ icon: i-lucide-sparkles
66+---
77+88+npmx.dev provides a comprehensive set of features for browsing npm packages.
99+1010+## Browse packages
1111+1212+### View package details
1313+1414+Each package page displays:
1515+1616+- **README** - Rendered markdown documentation
1717+- **Versions** - Complete version history with release dates
1818+- **Dependencies** - Required packages with version ranges that resolve to actual versions
1919+- **Dependents** - Packages that depend on this one (coming soon)
2020+2121+### Check package badges
2222+2323+Packages display helpful badges:
2424+2525+| Badge | Meaning |
2626+| ---------------- | ----------------------------------------------------------- |
2727+| ESM / CJS / Dual | Module format support |
2828+| TypeScript | Includes type definitions (links to `@types/*` if separate) |
2929+| Provenance | Verified build from a known source |
3030+3131+### View security information
3232+3333+- **Vulnerability warnings** - Security advisories from the OSV database
3434+- **Deprecation notices** - Clear warnings for deprecated packages and versions
3535+- **Provenance indicators** - Verified build badges for packages with npm provenance
3636+3737+## Browse source code
3838+3939+Press `.` or click the **Code** tab to open the code viewer:
4040+4141+- **File tree** - Navigate the package structure
4242+- **Syntax highlighting** - Language-aware code display
4343+- **Permalinks** - Link to specific lines in files
4444+4545+## View statistics
4646+4747+- **Download counts** - Weekly downloads with sparkline charts
4848+- **Install size** - Total size including transitive dependencies
4949+- **Repository stats** - Stars and forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, and Sourcehut
5050+5151+## Explore users and organizations
5252+5353+- **User profiles** - View any npm user's public packages at `/~username`
5454+- **Organization pages** - Browse org packages at `/@orgname`
5555+- **Search and filter** - Find packages within user/org lists
5656+5757+## Access related resources
5858+5959+- **JSR availability** - See if scoped packages are also available on JSR
6060+- **Playground links** - Quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
+36
docs/content/2.guide/2.keyboard-shortcuts.md
···11+---
22+title: Keyboard Shortcuts
33+description: Navigate npmx.dev efficiently with keyboard shortcuts
44+navigation:
55+ icon: i-lucide-keyboard
66+---
77+88+npmx.dev supports keyboard navigation for faster browsing.
99+1010+## Use global shortcuts
1111+1212+| Key | Action |
1313+| --- | ---------------- |
1414+| `/` | Focus search bar |
1515+| `.` | Open code viewer |
1616+1717+## Navigate search results
1818+1919+| Key | Action |
2020+| ------------------------- | --------------------- |
2121+| `Arrow Up` / `Arrow Down` | Move through results |
2222+| `Enter` | Open selected package |
2323+2424+## Browse code
2525+2626+When in the code viewer:
2727+2828+| Key | Action |
2929+| ------------------------- | ------------------ |
3030+| `Arrow Up` / `Arrow Down` | Navigate file tree |
3131+| `Enter` | Open selected file |
3232+| `Escape` | Close code viewer |
3333+3434+::tip
3535+These shortcuts work anywhere on the site. Press `/` from any page to quickly search for a package.
3636+::
+47
docs/content/2.guide/3.url-structure.md
···11+---
22+title: URL Structure
33+description: Understand how URLs work in npmx.dev
44+navigation:
55+ icon: i-lucide-link
66+---
77+88+npmx.dev supports npm-compatible URLs and simpler alternatives.
99+1010+## Use npm-compatible URLs
1111+1212+Replace `npmjs.com` with `npmx.dev` (or `xnpmjs.com`) in any npm URL:
1313+1414+| npm URL | npmx.dev equivalent |
1515+| ------------------------------- | ---------------------------------------------------------------------- |
1616+| `npmjs.com/package/nuxt` | [`npmx.dev/package/nuxt`](https://npmx.dev/package/nuxt) |
1717+| `npmjs.com/package/@nuxt/kit` | [`npmx.dev/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
1818+| `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) |
1919+| `npmjs.com/search?q=vue` | [`npmx.dev/search?q=vue`](https://npmx.dev/search?q=vue) |
2020+| `npmjs.com/~sindresorhus` | [`npmx.dev/~sindresorhus`](https://npmx.dev/~sindresorhus) |
2121+| `npmjs.com/org/nuxt` | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt) |
2222+2323+::tip
2424+Install the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) for automatic redirects.
2525+::
2626+2727+## Use simpler URLs
2828+2929+npmx.dev also supports shorter, cleaner URLs:
3030+3131+| Pattern | Example |
3232+| ---------------------- | -------------------------------------------------- |
3333+| `/<package>` | [`/nuxt`](https://npmx.dev/nuxt) |
3434+| `/<package>@<version>` | [`/vue@3.4.0`](https://npmx.dev/vue@3.4.0) |
3535+| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit) |
3636+| `/@org` | [`/@nuxt`](https://npmx.dev/@nuxt) |
3737+| `/~username` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
3838+3939+## Understand URL limitations
4040+4141+Some npm URLs are not yet supported:
4242+4343+| URL Pattern | Status |
4444+| ---------------------------- | -------------------------------- |
4545+| `/package/<name>/access` | Not yet supported |
4646+| `/package/<name>/dependents` | Coming soon |
4747+| `/settings/*` | Not supported (account settings) |
···11+---
22+title: Troubleshooting
33+description: Common issues and how to resolve them
44+navigation:
55+ icon: i-lucide-wrench
66+---
77+88+Solutions to common issues when using npmx.dev.
99+1010+## Package not found
1111+1212+If a package doesn't appear in search results or shows a 404 error:
1313+1414+1. **Check the package name** - Ensure the name is spelled correctly
1515+2. **Verify it exists on npm** - Check [npmjs.com](https://www.npmjs.com/) directly
1616+3. **Wait for sync** - Newly published packages may take a few minutes to appear
1717+1818+## Code viewer not loading
1919+2020+If the code viewer shows an error or doesn't load:
2121+2222+1. **Check package size** - Very large packages may take longer to load
2323+2. **Try a specific version** - Use a versioned URL like `/package-name@1.0.0`
2424+3. **Refresh the page** - Clear cache and reload
2525+2626+## Missing features compared to npmjs.com
2727+2828+Some features are not yet available:
2929+3030+| Feature | Status |
3131+| ----------------------------- | ----------- |
3232+| Dependents list | Coming soon |
3333+| Package admin (access/owners) | Coming soon |
3434+| Org/team management | Coming soon |
3535+| 2FA/account settings | Not planned |
3636+3737+## Report an issue
3838+3939+If you encounter a bug or have a feature request:
4040+4141+1. Check [existing issues](https://github.com/npmx-dev/npmx.dev/issues)
4242+2. [Open a new issue](https://issues.npmx.dev) with details
4343+3. Join the [Discord community](https://chat.npmx.dev) for discussion
+48
docs/content/3.faq/2.comparison.md
···11+---
22+title: Comparison
33+description: How npmx.dev compares to npmjs.com
44+navigation:
55+ icon: i-lucide-git-compare
66+---
77+88+A feature comparison between npmx.dev and npmjs.com.
99+1010+## Feature comparison
1111+1212+| Feature | npmjs.com | npmx.dev |
1313+| ------------------------------ | :-------: | :---------: |
1414+| Package search | Yes | Yes |
1515+| Package details & README | Yes | Yes |
1616+| Version history | Yes | Yes |
1717+| Dependencies list | Yes | Yes |
1818+| User profiles | Yes | Yes |
1919+| Organization pages | Yes | Yes |
2020+| Provenance indicators | Yes | Yes |
2121+| Code browser | Yes | Yes |
2222+| Dark mode | No | Yes |
2323+| Outdated dependency warnings | No | Yes |
2424+| Module format badges (ESM/CJS) | No | Yes |
2525+| TypeScript types indicator | Yes | Yes |
2626+| Install size calculation | No | Yes |
2727+| JSR cross-reference | No | Yes |
2828+| Vulnerability warnings | Yes | Yes |
2929+| Deprecation notices | Yes | Yes |
3030+| Download charts | Yes | Yes |
3131+| Playground links | No | Yes |
3232+| Keyboard navigation | No | Yes |
3333+| Multi-provider repo support | No | Yes |
3434+| Version range resolution | No | Yes |
3535+| Dependents list | Yes | Coming soon |
3636+| Package admin (access/owners) | Yes | Coming soon |
3737+| Org/team management | Yes | Coming soon |
3838+| 2FA/account settings | Yes | No |
3939+| Claim new package names | Yes | Yes |
4040+4141+## Why use npmx.dev?
4242+4343+npmx.dev focuses on:
4444+4545+- **Speed** - Fast page loads with no layout shift
4646+- **Developer experience** - Dark mode, keyboard navigation, cleaner UI
4747+- **Insights** - Module format badges, install size, outdated dependencies
4848+- **Compatibility** - Works with existing npm URLs
+37
docs/content/index.md
···11+---
22+seo:
33+ title: npmx.dev Documentation
44+ description: A fast, modern browser for the npm registry
55+---
66+77+::u-page-hero{title="npmx.dev" description="A fast, modern browser for the npm registry. Speed first, URL compatible, and simple."}
88+#links
99+:::u-button{color="neutral" size="xl" to="/getting-started/introduction" trailing-icon="i-lucide-arrow-right"}
1010+Get Started
1111+:::
1212+1313+:::u-button{color="neutral" icon="i-simple-icons-github" size="xl" to="https://github.com/npmx-dev/npmx.dev" target="\_blank" variant="outline"}
1414+View on GitHub
1515+:::
1616+::
1717+1818+::u-page-section{title="What you can do"}
1919+#features
2020+:::u-page-feature{icon="i-lucide-search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
2121+:::
2222+2323+:::u-page-feature{icon="i-lucide-code" to="/guide/features" title="Browse source code" description="View package source code with syntax highlighting and permalink to specific lines."}
2424+:::
2525+2626+:::u-page-feature{icon="i-lucide-link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
2727+:::
2828+2929+:::u-page-feature{icon="i-lucide-keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
3030+:::
3131+3232+:::u-page-feature{icon="i-lucide-shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
3333+:::
3434+3535+:::u-page-feature{icon="i-lucide-moon" to="/guide/features" title="Enjoy dark mode" description="Dark mode by default for a better viewing experience."}
3636+:::
3737+::