The package size widget gives you information about the size of a package that is available on npm. This can be useful when you are trying to figure out the cost of adding a new npm package. Or when you want to compare several similar packages and pick the most lightweight one.
How is it done?
It uses the awesome bundlephobia service to build a npm package and determine its minified and gzipped size. To find available packages it searches the npm registry.
Custom widgets that you might like
Compress and compare images with different codecs, right in your browser.
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
CSS Gradient Generator
CSS gradient generator tool that lets you create colorful background gradients.
CSS Background Patterns
Beautiful pure CSS background patterns that you can actually use in your projects!
Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
Helps you choose fonts for your crafting projects.
CSS Grid Generator
Learn CSS Grid visually and build web layouts with this interactive CSS Grid Generator.
Create beautiful product mockups in just a few clicks.
Quickly generate your favicon from text, image, or choose from hundreds of emojis.
A collection of web development cheatsheets.
CSS Easing Cheatsheet
Make animations more realistic by picking the right easing function.