runkit

Runkit will let you run code from a package, directly in your browser. It is very useful for quickly testing things out without setting up a local environment and saves time when checking out a new library/package.

yarnpkg.com

This is the yarn version of npm. I think it is a much cleaner view, although seems to often load slower than npmjs.org.

Socket.dev

Socket.dev is a startup ($20M funding recently) that aims to give security when installing dependencies. It isn't a JS-only website (they also support Python and Go).

But you can use it to view information about packages.

I think their interface is much nicer than npm's official one, and they can give insights into potential security issues.

Npm Trends

If you need to compare different packages, using npm trends can be useful.

Bundlephobia

If you look at npmjs, it will tell you the size of the package. But that is often misleading (and larger than it will be). For a slightly more accurate view of the size of a package, bundlephobia can be useful.

(It doesn't take into account any tree shaking that might take place - so the actual bundled size might be smaller for your application).

BundleJS

This is an alternative to bundlephobia. It lets you build up a bundle (with multiple imported dependencies) and shows you the size of the generated bundle.

Semver calculator

If you are struggling to understand what a semver version of a package means (such as ~2.2.0) or what it will match for a specific package, stick it in semver.npmjs.com/. It will output all the valid versions for a package that matches your input.

unpkg

I haven't used this in the last few years, but it was useful in the past. unpkg.com will work as a CDN for npm packages.

This is useful if you have a index.html file and need to add a package from npm - you can just add a <script> tag to include it.

Prettier playground

If you need to play around with Prettier config, then it can sometimes be easier to use this tool (with its various configuration options)

publint

Publint will tell you about linting issues in a package.

publint lints npm packages to ensure widest compatibility across environments, such as Vite, Webpack, Rollup, Node.js, etc.

When linting an npm package, the site downloads the tarball from the npm registry, and runs publint against it in a web worker. For larger packages, it may take a while to download and lint.

Are the types wrong?

This website will check an npm package for its typescript typings, and tell you if they have issues.

It can report issues such as CJS import issues and other module resolution issues.

Typescript playground

Use the playground to check your typings (and you can easily share the URLs)

Quicktype - generate types from JSON data

If you need to quickly generate types from JSON data, then quicktype.io/typescript might be useful for you.

JSON Placeholder (mock API)

When testing your FE it is often easier to test with a mock API endpoint.

A good and easy-to-use example is jsonplaceholder.typicode.com

createapp.dev - generate boilerplate config

Useful if you want to quickly start up a small app with some standard config.

Supports frameworks like React, Svelte, Vue. UI libraries such as tailwind or MUI. Babel/typescript, etc

jwt.io

If you need to inspect/change a JWT (JSON Web Token) then the best interface I've found is jwt.io