A year has passed and I am once again honored to review the Web Tools Weekly newsletter archives for the past 12 months, looking for a few of the most interesting front-end tools readers find in 2021. So, to kick off 2022, I have compiled a list of the 60 most popular tools. I believe there are at least one or two tools here that you can use in your front-end project starting today.
Some front-end tools are very practical, while others may be on the list just because of curiosity (I judge by the number of only clicks). Since many of the tools that make my annual list are relatively new, I think this is a good indication of which front-end tools will be popular in the coming year.
Count from top to bottom!
### Table of contents
- 60. Open Props
- NextUI
- Dopefolio
- Vizzu
- 10015 Tools
- Snoweb
- Tails
- MapLibre
- SVG Repo
- Animated Backgrounds
- Pico.css
- Coding Fonts
- UI-Neumorphism
- Beautiful CSS Buttons
- Shaper
- Prestige
- HTML.cafe
- Charts.css
- Buttons Generator
- Doodad Pattern Generator
- Kaboom
- Skuawk
- Glassmorphism CSS Generator
- Kalia
- AdminJS
- Pancake
- Mosaic Lite
- Iconduck
- Luxa CSS
- Glitter
- Components AI
- Unicode Arrows
- Type Scale Clamp Generator
- AnimXYZ
- Frontend Toolkit
- colorspalettes.earth
- Uncut
- Lowdefy
- JavaScript Booster
- Layout Patterns
- Baseline Background Remover
- Theatre.js
- Transition.css
- The Component Gallery
- party.js
- Headless UI
- Turbo
- tidy.js
- Tail-Kit
- Tailwind Components
- Pikaday
- HTML Boilerplates
- Whirl
- Riju
- DevUI
- Pollen
- AlterNight
- UIsual
- Supabase UI
- CSS Layout Generator
- What is your favorite front-end tool for 2021?
### 60. Open Props
Open Props provides a set of handmade design tokens composed of CSS custom properties. Due to this special CSS feature, I can see that such tools will become more and more common. They allow you to introduce small and useful collections of custom attributes such as animations.css, borders.css, fonts.css, zindex.css, and more will be available soon. Or you can just use the main Open Props file to get everything at once.
This is definitely a front-end tool to watch out for, and it is also a good contribution goal if you want to help build the available token library.
59. NextUI
A modern React library that uses the popular CSS-in-JS solution Stitches and includes out-of-the-box light and dark UI components along with a default color palette, which can be useful for quickly building login pages or other content that is not originally associated with any brand.
It is currently listed as the Alpha phase of development, so it is another tool worth paying attention to in the coming year.
58. Dopefolio
If you are looking for a way to easily create your own portfolio of developers, Dopefolio is a quick solution that is optimized for SEO and has a high Lighthouse score out of the box.
Live demos let you know what it looks like (responsive, etc.), and it contains a color selector component so you can test your own preferred template main color in real time.
57. Vizzu
This is a unique tool on this year's front-end tool list. Vizzu is an open source JavaScript library for creating animated data stories and visualizations. Perhaps its popularity is due to the need to create and embed medical data today.
This library allows you to easily build static data charts, animated charts, and data stories. You can view some live examples of animated charts or data stories, including a data story that shows which cameo character has the most lines throughout the entire run of the TV series Friends.
56. 10015 Tools
I seem to find some front-end tools like this every year. 10015 Tools are a set of front-end tools, not a single tool. It includes text tools, image tools, CSS tools, coding tools (such as minifiers), color tools, social media tools, and tools under some other miscellaneous categories.
This is definitely one of the more comprehensive all-in-one solutions I've seen, so I'm sure you'll find some useful front-end tools here that you can always come back to use.
55. Snoweb
Icon sets are always popular and I come across at least a dozen new icon sets every year. This icon set contains optimized SVG icons, many of which have built-in animations when you hover over them (like opening/closing envelope icons).
Like many icon sites, you can search by keyword or filter by category, one of which is the Brand category, which contains icons for Twitter, Facebook, Vimeo, YouTube, Snapchat, and more.
54. Tails
This is the first Tailwind-based tool to make the list; this has been a trend in the past few years as Tailwind becomes more popular. This front-end tool is a drag-and-drop page builder for projects using Tailwind CSS.
It contains two free "blocks" for each of the 15 categories, so there are a lot of free stuff here that you can pay to unlock the rest every month.
53. MapLibre
This open source map gallery was launched in March and has become popular throughout the year. It contains a JavaScript library and an SDK for displaying maps in iOS and Android applications.
If you want to understand the possibilities of a web-based front-end tool, the documentation contains many examples of using JavaScript.
52. SVG Repo
SVG Repo is on the list entirely based on the number. It is a library of over 300,000 free, optimized SVG-based graphics and icons, most of which are allowed for commercial use.
Each icon you choose will tell you which license it belongs to. You can search by keyword and "save" your favorite icon for later use (no login required).
51. Animated Backgrounds
This tool is in the top 60 this year, but it may not be the most practical front-end tool among them. As I said at the beginning, there are things that are clicked out of pure curiosity. It is an animation background library, from various CodePen demonstrations.
The library is useful because it displays the background as a pre-recorded video, so you don't have to worry about all demos loading and causing the browser tab to crash. Use these tools carefully (if any) as they usually use a lot of JavaScript and CSS.
50. Pico.css
This is different from the popular CSS framework today. It's a bit like an anti-Tailwind tool, more like a startup CSS file (such as reset) than a full-fledged framework.
Pico.css provides elegant default styles for all native HTML elements (you can preview here) without adding a lot of classes to your tags - and the entire file is smaller than 10kb after gzip.
49. Coding Fonts
Encoding fonts seems to be an exciting new trend lately, and CSS-Tricks takes advantage of this to create this small interactive information application.
Select a font on the left to display sample code, font information (hyphen, italic, etc.), cost (mostly free), and options to display HTML, CSS, or JavaScript sample code.
48. UI-Neumorphism
This React library is based on an old simulating trend that seemed outdated a few years ago. Will this trend come back? Probably not. In fact, even though I shared this React library for the first time last year, it's been around for about two years.
The library contains a large number of different components, all of which achieve a "new simulating" appearance. Interestingly, but probably not suitable for many projects.
47. Beautiful CSS Buttons
Almost every app or website needs buttons, so such a collection is always popular. Many of these buttons are different from what you might see elsewhere.
Many buttons contain interesting hover effects, and you can easily copy and paste HTML and CSS of any single button directly on the page.
46. ??Shaper
This interactive tool allows you to adjust various UI settings on the page in real time to build different page elements. Once you have adjusted the content to your preference, you can get the code that uses CSS custom properties.
You can switch between the demo view and the "Specification" view (i.e. code and other useful information). This tool focuses on typography and the rest of the UI styles, which is a key part of making the layout look right.
45. Prestige
This is a text-based HTTP client in the browser—like Postman, but without an interface. It allows you to define requests in plain text, which you can choose to save as a Gist. It includes isolated cookie management and has both light and dark modes.
As the author explains, “I created Prestige because I need an application like this when I work…and interact with an external API.”
44. HTML.cafe
This is probably the easiest tool on the entire list. HTML.cafe is more or less a humble CodePen, lacking better terms. I don't think people will be interested in this kind of thing because there are already powerful tools to do what it can do. Nevertheless, it is a very simple HTML editor with real-time preview capabilities.
It doesn't have a separate CSS or JavaScript window like CodePen, but you can easily do it in