bluwy
2025-12-16T17:34:57Z

Various improvements and fixes for npmjs.com

Npm Userscript

Various improvements and fixes for npmjs.com. Install on Greasyfork.

Before:

After:

Additional demos:

Video demo on Bluesky

Screenshots on Bluesky

Features

Feature | Description
better-dependencies | Improved package dependencies tab with added peer dependencies info, optional dependencies info, and dependency semver ranges.
better-versions | Improved package versions tab with compact table view, cumulated versions table, show tags next to versions, and fix provenance icon alignment.
dim-mode | [Disabled by default] Make light mode less bright. Does not implement dark mode completely.
fix-issue-pr-count | Show "Issue" and "Pull Requests" counts in the package sidebar. At the time of writing, npm's own implementation is broken for large numbers for some reason. This temporarily fixes it.
fix-styles | Fix various style issues on the npm site.
helpful-links | Add helpful links beside the package header for convenience.
module-replacements | Suggest alternatives for the package based on "es-tooling/module-replacements" data set.
move-funding | Move the "Fund this package" button to the bottom of the sidebar.
no-code-beta | [Disabled by default] Hide the "Beta" label in the package code tab.
remember-banner | Remember the banner at the top of the page when dismissed, so it doesn't keep showing up.
remove-redundant-homepage | Remove the homepage link if it's the same as the repository link, or only has a hash to the readme.
repository-card | Consolidates all repository information in a card-like view in the package sidebar. Enabling this would remove the "Stars", "Issues", and "Pull Requests" columns.
repository-directory | Adds the repository directory to the repository link.
show-binary-label | Adds a label for packages that publish prebuilt native binaries.
show-cli-label | Adds a label if the package publishes a CLI via the package.json "bin" field, and update the install command to "npm create" or "npx" accordingly.
show-engine-label | Adds a label of the engine versions (e.g. Node.js) that a package supports.
show-file-types-label | Show ESM or CJS labels if the package publishes them.
show-lifecycle-scripts-label | Adds a label if the package defines lifecycle scripts in its package.json.
show-types-label | Adds a label for packages that publish TypeScript types. This is similar to npm's own DT / TS icon but with a more consistent UI. It is also more accurate if the package publishes types but isn't detectable in the package.json.
show-vulnerabilities | Adds a label if a package is vulnerable in the header and versions table. The core vulnerability data is powered by https://osv.dev.
stars | Display a "Stars" column in the package sidebar for GitHub repos.
tarball-size | Display the tarball size of the package.
unpacked-size-and-total-files | Display the "Unpacked Size" and "Total Files" columns for older packages that lack the data.

Disclaimer

1. As npm updates their site, some features may break or behave unexpectedly until the userscript is updated accordingly. Please be aware especially when updating sensitive data.

2. The userscript fetches from https://npm-userscript.bjornlu.workers.dev (a custom Cloudflare Worker) that proxies data from other sources to save on bandwidth and cache results. Check the worker directory for the source code.

Sponsors

License

MIT