Skip to content

Conversation

@trueberryless
Copy link
Contributor

@trueberryless trueberryless commented Jan 31, 2026

Description

Implement new API endpoint for badges with these different types:

  • version: Shows the latest or specific version of the package.
  • license: Displays the package license (e.g., MIT, Apache-2.0).
  • size: Shows the install size (via Bundlephobia) or unpacked size.
  • downloads: Displays monthly download statistics.
  • downloads-day: Displays daily download statistics.
  • downloads-week: Displays weekly download statistics.
  • downloads-month: Alias for monthly download statistics.
  • downloads-year: Displays yearly download statistics.
  • vulnerabilities: Shows the number of vulnerabilities found via OSV. /
  • dependencies: Lists the total count of package dependencies.
  • created: Displays the date the package was first published.
  • updated: Displays the date of the most recent modification.
  • engines: Shows the supported Node.js version range.
  • types: Indicates if TypeScript types are included. /
  • maintainers: Displays the total count of package maintainers.
  • deprecated: Shows if the package is active or deprecated. /
  • quality: NPMS.io quality score based on linting and tests.
  • popularity: NPMS.io popularity score based on downloads and stars.
  • maintenance: NPMS.io maintenance score based on activity.
  • score: The overall NPMS.io combined score.

Thoughts

  1. I would like to document those changes, but I am really not sure if we even have docs for the API endpoints, so I left it out for now.
  2. I wonder if we should keep the old endpoint as well, but redirect to the version type, as with this implementation the old route would be invalid and return 404 🤔 EDIT: I played around with this idea a little bit and this mostly results just in conflicts as the routes overlap (e.g. the package version will be returned and if a specific version is specified without /version/, it tries to match the route to the [type] route, so it fails. IMO we should drop the old route entirely to keep it clean and maintainable.

Examples

Here are some example badges:

Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev

@vercel
Copy link

vercel bot commented Jan 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 1, 2026 6:34pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 1, 2026 6:34pm
npmx-lunaria Ignored Ignored Feb 1, 2026 6:34pm

Request Review

@btea
Copy link
Contributor

btea commented Feb 1, 2026

You can add custom npmx badges to your markdown files using the following syntax: `[![Open on npmx.dev](https://npmx.dev/api/registry/badge/YOUR_PACKAGE)](https://npmx.dev/YOUR_PACKAGE)`

I think we can synchronize the functionality in the documentation.

@danielroe
Copy link
Member

would you mind adding some links to show what they look like?

I'm wondering whether it's worth adding so many different badges when there are already badge apis ... but that's only a slight niggle - would love to know what folk think

@trueberryless
Copy link
Contributor Author

Can we get a docs preview please? 🙏 Locally the dev:docs errors very likely due to Nix shell limiations…

@trueberryless
Copy link
Contributor Author

would you mind adding some links to show what they look like?

Sure (gonna include them in the description as well):

Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev
Open on npmx.dev

I'm wondering whether it's worth adding so many different badges when there are already badge apis ... but that's only a slight niggle - would love to know what folk think

Yeah, I noticed them getting more and more, because I discovered this dropdown menu as well 😅
image

Currently, I fetch all the data fresh from NPM as I didn't exactly know where to get the info from elsewhere (eg some utils function…). Ideally, I would like to fetch the data from cached npmx functions and also filter them by what is relevant and what not. Do you wanna suggest which ones would be nice and which are unnecessary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve npmx custom badge

3 participants