Are These the Most Interesting Front-end Developer Tools for 2021?
Tags: css, javascript, webdev, tooling
Published: 2021-01-11 22:42:30

<p><em>This article was originally published <a href="https://www.impressivewebs.com/most-interesting-front-end-developer-tools-2021/">on my primary website</a></em>.</p>

<p>When I come to the end of any given year, it’s always interesting to look back through the click-through stats for my weekly newsletter <a href="https://webtoolsweekly.com/">Web Tools Weekly</a> to see which tools got the most attention.</p>

<p>This year wasn’t all that different from previous years. I’ve learned that clicks happen for basically one of two reasons:</p>

<ul>
  <li>Curiosity</li>
  <li>Will Make My Life Easier</li>
</ul>

<p>And ultimately, that latter reason is why people check out any web developer tool.</p>

<p>And notice the title of this post. I’m not claiming that these are the “best” or “most popular” tools (and some of them aren’t even all that new, they were just new to me). But they are possibly the most interesting, even if not necessarily the most useful.</p>

<p>So with that in mind, here’s a big superficial roundup of my newsletter’s 60 most-clicked tools of 2020 — and potentially <strong>the most interesting choices for 2021</strong>. I’m pretty sure you’ll find at least a few items here that you’ll find useful for a future project.</p>

<h2 id="pikwizard">60. <a href="https://pikwizard.com/">Pikwizard</a></h2>

<p>Anything that resembles the super-popular Unsplash project is going to get a lot of clicks. This library offers over 1 million stock images and videos that are royalty free and safe for commercial use, with no attribution required.</p>

<p><a href="https://pikwizard.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/t6vi13ptjw2kba95516t.png" loading="lazy" alt="Pikwizard" width="770"></a></p>

<p>It’s hard to see anyone uprooting Unsplash as the leader in this space, but Pikwizard seems like a good alternative if you’re looking for free stock media without needing to worry about price or giving credit. But note the main drawback to Pikwizard is the fact that “Premium” photos from Adobe are also included in searches.</p>

<h2 id="tailwind-starter-kit">59. <a href="https://github.com/creativetimofficial/tailwind-starter-kit">Tailwind Starter Kit</a></h2>

<p>Tailwind appears early in this list and often, not surprisingly. I’d say Tailwind is the CSS tool that’s most on the rise at the moment, so I’m constantly finding tools and frameworks associated with it in my research.</p>

<p><a href="https://github.com/creativetimofficial/tailwind-starter-kit"><img src="https://dev-to-uploads.s3.amazonaws.com/i/m8c63hxkuu00t8nadrlv.png" loading="lazy" alt="Tailwind Starter Kit" width="770"></a></p>

<p>This toolkit is an open source add-on for Tailwind that features multiple HTML elements and comes with dynamic components for React, Vue, and Angular.</p>

<h2 id="spider">58. <a href="https://tryspider.com/">Spider</a></h2>

<p>Web scraping tools always seem to do well in my newsletter, as do things like HTML to PDF conversion utilities. This one claims to be “the easiest tool to scrape the internet”. It’s not free, but a small one-time fee seems like a good investment if it’s as effective as they claim.</p>

<p><a href="https://tryspider.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/g1udfw1h3sc3c18c7ydd.png" loading="lazy" alt="Spider" width="770"></a></p>

<p>Just a few clicks to turn a website into organized data that can be downloaded as JSON/CSV with no coding or configuration required.</p>

<h2 id="van11y">57. <a href="https://van11y.net/">Van11y</a></h2>

<p>This is one that wasn’t exactly new in 2020, but it was new to me. It’s a collection of customizable, accessible scripts that includes lots of stuff you probably include often in your UIs: Accordion, tab panel, carousel, tooltips, modals, and more — all built using progressive enhancement.</p>

<p><a href="https://van11y.net/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/x33ufz5z8wsdn5q0k2bk.png" loading="lazy" alt="Van11y" width="770"></a></p>

<p>There aren’t a lot of components here, but since the ones included are so common, there’s enough here to make this well worth a bookmark.</p>

<h2 id="css-to-tailwindcss">56. <a href="https://transform.tools/css-to-tailwind">CSS to TailwindCSS</a></h2>

<p>Once again Tailwind is in the spotlight, this time with an online tool to convert standards CSS to the best possible Tailwind CSS equivalents.</p>

<p><a href="https://transform.tools/css-to-tailwind"><img src="https://dev-to-uploads.s3.amazonaws.com/i/y19djmztuw3q3xgaa5uk.png" loading="lazy" alt="CSS to TailwindCSS" width="770"></a></p>

<p>I’m not entirely sure this one is going to be super practical for a lot of projects, but I’m guessing this got a lot of curiosity clicks due to the number of developers currently using Tailwind and probably just wondering what this sort of thing would entail.</p>

<h2 id="radius">55. <a href="https://rangle.io/radius/">Radius</a></h2>

<p>Design systems have been a hot topic for a few years now, so this toolkit isn’t a surprise on the list.</p>

<p><a href="https://rangle.io/radius/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/5u8gu8ivood540acnw20.png" loading="lazy" alt="Radius" width="770"></a></p>

<p>This collection of open-source tools and libraries has the goal of helping you and your team to build a design system from scratch without all the typical roadblocks you might normally face, speeding up the zero-to-hero process that a design system often involves.</p>

<h2 id="sail-ui">54. <a href="https://sailui.github.io/">Sail UI</a></h2>

<p>Once again Tailwind is the main focus here. This collection of basic UI components is pretty small. Personally, I don’t see anything too groundbreaking here, so the Tailwind factor probably played a major role in the initial burst of clicks for this one.</p>

<p><a href="https://sailui.github.io/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/tvjctd4qe6qo1et5nk96.png" loading="lazy" alt="Sail UI" width="770"></a></p>

<p>That being said, I can see this one growing and gaining popularity with some proper oversight and maintenance in the coming year.</p>

<h2 id="control">53. <a href="https://control.rocks/">Control</a></h2>

<p>This has free and paid versions. The free version includes 100+ illustrations that can be customized to create the specific scene you’re looking for. Only PNG for the free version but 100% vector and compatible with AI, Figma, and Sketch for the paid versions.</p>

<p><a href="https://control.rocks/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/auw5n7d7sbhr65cg7o60.png" loading="lazy" alt="Control" width="770"></a></p>

<p>You can slightly alter a particular illustration’s subject/theme and also change the style of the illustration (solid or linear). This comes from a startup called Craftwork who offer a number of different graphic-related products.</p>

<h2 id="public-apis">52. <a href="https://public-apis.io/">Public APIs</a></h2>

<p>This is a directory of free public APIs for software developers. Might be a good place to look if you’re just getting started with API-based development or maybe you want some inspiration on a new product or service to build that uses one of the APIs.</p>

<p><a href="https://public-apis.io/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/mivvnzb0xzbn192322h0.png" loading="lazy" alt="Public APIs" width="770"></a></p>

<p>Categories include Open Data, Cryptocurrency, Science, Finance, Sports &amp; Fitness, and lots more.</p>

<h2 id="css-media-vars">51. <a href="https://propjockey.github.io/css-media-vars/">css-media-vars</a></h2>

<p>This is definitely unique in the list. If you’re already familiar with CSS variables and media queries, then you’ll be fascinated by the idea of combining the two concepts.</p>

<p><a href="https://propjockey.github.io/css-media-vars/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/0qt06eeof7zanmf4ugmu.png" loading="lazy" alt="css-media-vars" width="770"></a></p>

<p>The page offers a live editable demo so you can see exactly how the technique works and how you might customize the various breakpoints.</p>

<h2 id="guijs">50. <a href="https://guijs.dev/">guijs</a></h2>

<p>As I mentioned at the outset, anything that claims to make life easier for developers always gets tons of clicks in my newsletter. This one literally has that as its tagline.</p>

<p><a href="https://guijs.dev/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/0fvcypvb09u3rd2n7ml5.png" loading="lazy" alt="guijs" width="770"></a></p>

<p>It’s a multi-purpose native Windows and Mac app to help you manage your development projects. Includes features for projects, package installation, script management, and more.</p>

<h2 id="wicked-templates">49. <a href="https://www.wickedtemplates.com/">Wicked Templates</a></h2>

<p>Sick of Tailwind yet? Yeah, unlikely. This is a set of four Tailwind templates are easy to customize and can be integrated with whatever your full-stack toolset is (Next.js, Vue, Laravel, Gatsby, React, etc).</p>

<p><a href="https://www.wickedtemplates.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/h1dy1bb4xtqcxw76hy74.png" loading="lazy" alt="Wicked Templates" width="770"></a></p>

<p>Only a single template is free, but for the small price of the bundle you can have lifetime support.</p>

<h2 id="h3">48. <a href="https://h3.js.org/">H3</a></h2>

<p>This microframework comes in at under 4KB minified and will help you build client-side single-page applications (SPAs) in modern JavaScript.</p>

<p><a href="https://h3.js.org/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/2ovoi3bdqs93c9wcno83.png" loading="lazy" alt="H3" width="770"></a></p>

<p>How small is it? The API is composed of just seven methods and two properties. Certainly not for every project but maybe the source code alone would be useful to learn from, should you want to delve into developing something like this in the future.</p>

<h2 id="line-awesome">47. <a href="https://icons8.com/line-awesome">Line Awesome</a></h2>

<p>A free alternative to Font Awesome that consists of 1300+ flat-line icons and boasts complete coverage of the main Font Awesome icon set.</p>

<p><a href="https://icons8.com/line-awesome"><img src="https://dev-to-uploads.s3.amazonaws.com/i/mvcq1f7jqhyclhk6h7q7.png" loading="lazy" alt="Line Awesome" width="770"></a></p>

<p>Also includes the option to import into Figma, Sketch, or Photoshop.</p>

<h2 id="bem-naming-cheat-sheet">46. <a href="https://9elements.com/bem-cheat-sheet/">BEM Naming Cheat Sheet</a></h2>

<p>When I first started the newsletter, I used to include an occasional “Learning Tools” issue that would include stuff like this. While I don’t do that anymore, I decided to include this one and it did quite well.</p>

<p><a href="https://9elements.com/bem-cheat-sheet/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/h41sypvoax49o3hm1tew.png" loading="lazy" alt="BEM Naming Cheat Sheet" width="770"></a></p>

<p>It’s a nicely designed guide to using the BEM naming method that’s been popular among CSS developers for a number of years.</p>

<h2 id="embla-carousel">45. <a href="https://davidcetinkaya.github.io/embla-carousel/">Embla Carousel</a></h2>

<p>Carousels are always popular and get lots of clicks, so no surprise here. This one is a bare-bones, extensible carousel library with great fluid motion and swipe precision.</p>

<p><a href="https://davidcetinkaya.github.io/embla-carousel/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/8tjrsxpd12w6ddrmp80x.png" loading="lazy" alt="Embla Carousel" width="770"></a></p>

<p>It’s library agnostic, dependency free, and open source so it looks like a good option for vanilla JavaScript projects.</p>

<h2 id="open-peeps">44. <a href="https://www.openpeeps.com/">Open Peeps</a></h2>

<p>A hand-drawn illustration library to create scenes with people, with each drawing made available in PNG or SVG format.</p>

<p><a href="https://www.openpeeps.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/v3ox9sxav8ulckue3xgx.png" loading="lazy" alt="Open Peeps" width="770"></a></p>

<p>You can grab some of them directly on the site or download the whole graphics package that allows you to bring it into your graphics tool of choice. Then mix-and-match for over 500,000 possible combinations of illustrations.</p>

<h2 id="css-section-separator-generator">43. <a href="https://wweb.dev/resources/css-separator-generator">CSS Section Separator Generator</a></h2>

<p>This is one of the simplest tools in the list. It’s an easy way to generate a pure CSS fancy section separator to add to your pages.</p>

<p><a href="https://wweb.dev/resources/css-separator-generator"><img src="https://dev-to-uploads.s3.amazonaws.com/i/xfcyvpy2hvxztx39pbf2.png" loading="lazy" alt="CSS Section Separator Generator" width="770"></a></p>

<p>You can interactively adjust the look and size of the separator and its pattern, then grab the HTML and CSS to drop into your stylesheet.</p>

<h2 id="lion-web-components">42. <a href="https://github.com/ing-bank/lion">Lion Web Components</a></h2>

<p>A set web components that feature three things all developer want in a UI toolkit: performance, accessibility, and flexibility.</p>

<p><a href="https://github.com/ing-bank/lion"><img src="https://dev-to-uploads.s3.amazonaws.com/i/4qbbyua3383qg9jlw0mr.png" loading="lazy" alt="Lion Web Components" width="770"></a></p>

<p>I like how each component on the demo/docs site shows you the accessibility violations (spoiler: there aren’t many) as well as the accessibility “passes”, so you can see how each component is accessible to all users.</p>

<h2 id="debug-visualizer">41. <a href="https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer">Debug Visualizer</a></h2>

<p>This VS Code extension has over 31,000 installs and a strong Marketplace rating, telling me a lot of people like it so far.</p>

<p><a href="https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer"><img src="https://dev-to-uploads.s3.amazonaws.com/i/3elcip76vy2ip8ycvc2n.png" loading="lazy" alt="Debug Visualizer" width="770"></a></p>

<p>As the name suggest, it allows you to visualize data structures while debugging. Works best with JavaScript/TypeScript and has been tested with C#, Java, PHP, Python, and more. In theory it should work with any language you can debug in VS Code.</p>

<h2 id="geist-ui">40. <a href="https://geist-ui.dev/">Geist UI</a></h2>

<p>This open source design system features a UI library for React and Vue, providing yet another option for building modern interfaces.</p>

<p><a href="https://geist-ui.dev/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/n9owcs4ankt6q9gzrf9h.png" loading="lazy" alt="Geist UI" width="770"></a></p>

<p>The main site links to separate docs pages for both versions and there’s also a typography stylesheet and general stylesheet for a number of opinionated but elegant defaults.</p>

<h2 id="sysend.js">39. <a href="https://github.com/jcubic/sysend.js">sysend.js</a></h2>

<p>Here’s another one that’s unique in this list: It’s a small library that allows you to send messages between pages that are open in the same browser.</p>

<p><a href="https://github.com/jcubic/sysend.js"><img src="https://dev-to-uploads.s3.amazonaws.com/i/irllr6cacve9toqimsqp.png" loading="lazy" alt="sysend.js" width="770"></a></p>

<p>It has no dependencies, supports cross-domain communication, and uses either HTML5 LocalStorage or the newer BroadcastChannel API — whichever one the browser supports.</p>

<h2 id="hero-generator">38. <a href="https://hero-generator.netlify.app/">Hero Generator</a></h2>

<p>I come across lots of online generators for various front-end coding problems, but this one is a little different. It’s an interactive tool to generate a hero image header section for a web page, a common design pattern that you’ll usually reinvent  over and over unnecessarily.</p>

<p><a href="https://hero-generator.netlify.app/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/5bbeyfx03grku8mon8gr.png" loading="lazy" alt="Hero Generator" width="770"></a></p>

<p>The page live updates as you adjust the settings, then you can grab the full CSS which you can later extend or modify even after you’ve generated it here.</p>

<h2 id="toy-faces">37. <a href="https://amritpaldesign.com/toy-faces">Toy Faces</a></h2>

<p>This is definitely not for every website you’ll build but if you need some fun, diverse 3D avatars for a design mockup or a full-blown project, this might work.</p>

<p><a href="https://amritpaldesign.com/toy-faces"><img src="https://dev-to-uploads.s3.amazonaws.com/i/5g2irc8gh94861fkzohj.png" loading="lazy" alt="Toy Faces" width="770"></a></p>

<p>These 120+ avatars feature a toy-like appearance. They’re not free but you get lifetime access to new releases in the set, available in high-res JPEG and transparent PNG.</p>

<h2 id="halfmoon">36. <a href="https://www.gethalfmoon.com/">Halfmoon</a></h2>

<p>I’m guessing this one grabbed a lot of people’s attention due to it being marketed as having a “built-in dark mode” which a lot of developers are into nowadays.</p>

<p><a href="https://www.gethalfmoon.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/cq623ticu3pjbc3p2wuz.png" loading="lazy" alt="Halfmoon" width="770"></a></p>

<p>But that’s just one feature. It’s a full-blown front-end framework similar to Bootstrap with lots of components and utilities.</p>

<h2 id="v-dashboard">35. <a href="https://github.com/wobsoriano/v-dashboard">V-Dashboard</a></h2>

<p>Admin dashboard starter templates and frameworks always seem to do well in my newsletter, so no surprise that this was one of the most clicked tools.</p>

<p><a href="https://github.com/wobsoriano/v-dashboard"><img src="https://dev-to-uploads.s3.amazonaws.com/i/f8q22k6yg0fc1mjt9s4b.png" loading="lazy" alt="v-dashboard" width="770"></a></p>

<p>This one is built with Vite, Vue 3, Tailwind CSS, and TypeScript.</p>

<h2 id="broider">34. <a href="https://maxbittker.github.io/broider/">broider</a></h2>

<p>Here’s yet another unique entry in this list. This interactive generator creates “9-patch” borders that use CSS’s border-image syntax.</p>

<p><a href="https://maxbittker.github.io/broider/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/590cp9lrr2kfhkx59xyb.png" loading="lazy" alt="broider" width="770"></a></p>

<p>You can draw on the page then copy the CSS that includes a data URI using the border images standard. You can be one of the 20 people in the world who found a use for border images!</p>

<h2 id="falcon">33. <a href="https://github.com/plotly/falcon">Falcon</a></h2>

<p>This was not a new tool but this year was the first time I’d come across it, so it gets the nod in this list. This is an open-source SQL editor for Mac, Windows, and Linux.</p>

<p><a href="https://github.com/plotly/falcon"><img src="https://dev-to-uploads.s3.amazonaws.com/i/ggsiad8widnu23hi71cn.png" loading="lazy" alt="Falcon" width="770"></a></p>

<p>Supports connecting to RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, Oracle, SQLite, and more. According the GitHub repo, it hasn’t been updated for a couple of years, but I doubt that poses any major problems for something like this.</p>

<h2 id="neumorphism.io">32. <a href="https://neumorphism.io/">Neumorphism.io</a></h2>

<p>Remember when Neumorphism was everywhere? Well, it still has its place. This online generator will help you interactively produce code for elements that have ‘soft UI’ (i.e. 3D box shadows and lighting).</p>

<p><a href="https://neumorphism.io/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/7ms83c5q9uf74e911dhm.png" loading="lazy" alt="Neumorphism.io" width="770"></a></p>

<p>Offers lots of fine-grained options to perfect the look you’re after.</p>

<h2 id="meraki-ui">31. <a href="https://merakiui.com/">Meraki UI</a></h2>

<p>Another UI library and once again this is based on Tailwind CSS. Buttons, cards, forms, dropdowns, hero components, and more.</p>

<p><a href="https://merakiui.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/7jm51q8icnqa212koo20.png" loading="lazy" alt="Neumorphism.io" width="770"></a></p>

<p>The one cool thing about this one is that it features the ability to easily switch a UI element to right-to-left (RTL), for support of RTL languages. You can try the RTL feature interactively while testing out the various component demos.</p>

<h2 id="calcolor.co">30. <a href="https://calcolor.co/">calcolor.co</a></h2>

<p>This website provides a dedicated page for every color code with info, various syntaxes for the color (hex, RGB, etc.)</p>

<p><a href="https://calcolor.co/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/wgtot4dx2lh4frjfdbqj.png" loading="lazy" alt="calcolor" width="770"></a></p>

<p>Use it to find matching color variants, learn more about color properties, or convert color values.</p>

<h2 id="tailblocks">29. <a href="https://github.com/mertJF/tailblocks">tailblocks</a></h2>

<p>How many Tailwind tools are we up to now? I believe it’s 7. This one is a set of Tailwind UI components divided into 15 categories.</p>

<p><a href="https://github.com/mertJF/tailblocks"><img src="https://dev-to-uploads.s3.amazonaws.com/i/gxcg8zr8hpsjqkyo89jt.png" loading="lazy" alt="tailblocks" width="770"></a></p>

<p>The categories include stuff like e-commerce, blog, CTA, footer, gallery, and lots more.</p>

<h2 id="good-email-code">28. <a href="https://www.goodemailcode.com/">Good Email Code</a></h2>

<p>This is the first of three HTML email code tools to crack the top 30 in this list. This is a small library HTML email components built with best practices for maximum email client support.</p>

<p><a href="https://www.goodemailcode.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/zp7bihqkv87j98xf1t5t.png" loading="lazy" alt="Good Email Code" width="770"></a></p>

<p>There’s a description for each of the components and they include a template, preheader, container, columns, button, and more.</p>

<h2 id="pixel-lite">27. <a href="https://themesberg.com/product/ui-kit/pixel-lite-free-bootstrap-4-ui-kit">Pixel Lite</a></h2>

<p>This beautifully crafted, responsive UI kit based on Bootstrap 4 includes 80 components, 3 sections, 4 example pages, and an optional premium version.</p>

<p><a href="https://themesberg.com/product/ui-kit/pixel-lite-free-bootstrap-4-ui-kit"><img src="https://dev-to-uploads.s3.amazonaws.com/i/ig5m4anzj08ko0uaj6ah.png" loading="lazy" alt="Pixel Lite" width="770"></a></p>

<p>Uses Sass variables so you can easily customize the look to suit your needs.</p>

<h2 id="coded-mails">26. <a href="https://codedmails.com/">Coded Mails</a></h2>

<p>These hassle-free responsive HTML email starters include 60+ templates divided into 6 categories, along with 12 themes.</p>

<p><a href="https://codedmails.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/oa2rdsdacs0f82j1ru76.png" loading="lazy" alt="Coded Mails" width="770"></a></p>

<p>You can preview all templates and themes on both mobile and desktop email views. Free only for non-commercial projects, but worth considering the modest price tag for the full version with extra features.</p>

<h2 id="big-heads">25. <a href="https://bigheads.io/">Big Heads</a></h2>

<p>This library of illustrated heads includes a random character generator that you can then interactively customize on the fly.</p>

<p><a href="https://bigheads.io/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/xsie8dlyt9awbzgv20ar.png" loading="lazy" alt="Big Heads" width="770"></a></p>

<p>Once you’ve selected your settings, the character can be included in your project with React or as an SVG (which also offers a direct URL to the customized graphic).</p>

<h2 id="codemap">24. <a href="https://codemap.app/">Codemap</a></h2>

<p>This is yet another code visualization tool, which makes me wonder if this is something that’s in demand now.</p>

<p><a href="https://codemap.app/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/9a8hb8918ndyvqj6uuo7.png" loading="lazy" alt="Codemap" width="770"></a></p>

<p>This one is a Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.</p>

<h2 id="signature.email">23. <a href="https://signature.email/">signature.email</a></h2>

<p>This is not typically the kind of tool I usually come across, but it was one of the most-clicked tools of the year.</p>

<p><a href="https://signature.email/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/fbnix4w3ihe2ehnuduhn.png" loading="lazy" alt="signature.email" width="770"></a></p>

<p>It’s a visual drag-and-drop editor for email signatures, to help with consistent branding across team emails. You can pick from various templates, then customize as you see fit.</p>

<h2 id="leaf-php">22. <a href="https://leafphp.netlify.app/">Leaf PHP</a></h2>

<p>Not a front-end tool, but useful for full stack: Create clean, simple, and powerful web applications and APIs quickly.</p>

<p>Besides a few WordPress tools, this is probably the only PHP that I included and — surprise, surprise — it’s one of the most-clicked tools.</p>

<p><a href="https://leafphp.netlify.app/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/b2v448a9xpu1lw6syluw.png" loading="lazy" alt="Leaf PHP" width="770"></a></p>

<h2 id="blunt">21. <a href="https://github.com/f-prime/Blunt">Blunt</a></h2>

<p>This CSS framework is a little different: It helps with layouts and leaves your styling alone. It only provides helper classes to make positioning and responsive design easier.</p>

<p><a href="https://github.com/f-prime/Blunt"><img src="https://dev-to-uploads.s3.amazonaws.com/i/9hrd4bzu4gyhj4gppanf.png" loading="lazy" alt="Blunt" width="770"></a></p>

<p>The author made it to fit his own needs due to the fact that other frameworks did either too much or too little.</p>

<h2 id="arwes">20. <a href="https://arwes.dev/">Arwes</a></h2>

<p>This is definitely the coolest project in this whole list. I think the only reason it didn’t get even more clicks is due to the fact that it was already making the rounds in the industry by the time I had included it in mine.</p>

<p><a href="https://arwes.dev/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/ayffo7h4i411qgn25wwc.png" loading="lazy" alt="Arwes" width="770"></a></p>

<p>It’s a futuristic sci-fi and cyberpunk-inspired graphical UI framework for web apps and includes some neat animations and audio, so be sure to try out the various components if you haven’t seen this one yet. Not likely you’ll use it on more than one project in a lifetime, but it’s just so fun to play with!</p>

<h2 id="free-illustrations">19. <a href="https://freeillustrations.xyz/">Free Illustrations</a></h2>

<p>This isn’t just a single illustration pack like the others on this list, but a directory of various free illustration sites with info on license, file types, etc., so you can figure out which graphics pack is right for you.</p>

<p><a href="https://freeillustrations.xyz/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/cpq33s0e8b8sphetnsoj.png" loading="lazy" alt="Free Illustrations" width="770"></a></p>

<p>You can filter by file type (AI, SVG, GIF, SKETCH, PNG, EPS, etc.) so it’s easy to find something that matches your needs.</p>

<h2 id="moretoggles.css">18. <a href="https://jnkkkk.github.io/MoreToggles.css/">MoreToggles.css</a></h2>

<p>CSS utilities that style form elements tend to be pretty popular. This one includes a whole slew of styles for toggles that are checkboxes under the hood.</p>

<p><a href="https://jnkkkk.github.io/MoreToggles.css/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/vlpwc548lzz2rufrm60c.png" loading="lazy" alt="MoreToggles.css" width="770"></a></p>

<p>Be sure to check out the gallery that showcases all the different styles and colors.</p>

<h2 id="patternfly">17. <a href="https://www.patternfly.org/">PatternFly</a></h2>

<p>Another entry in the design system category. This open source design system includes dozens of components and layouts.</p>

<p><a href="https://www.patternfly.org/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/tf3yjxnsgfxlflhhu0zx.png" loading="lazy" alt="PatternFly" width="770"></a></p>

<p>Components are available in HTML/CSS or React, with plenty of demos and documentation to help you along.</p>

<h2 id="screenshot.rocks">16. <a href="https://screenshot.rocks/">Screenshot.Rocks</a></h2>

<p>This is a great tool for creating attractive browser and mobile mockups in just a few clicks. Might be useful for slides in presentations.</p>

<p><a href="https://screenshot.rocks/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/8xctu4ownnmv70dp2da2.png" loading="lazy" alt="Screenshot.Rocks" width="770"></a></p>

<p>Enter a URL to capture, then customize the device and background, then download as PNG, SVG, or JPEG.</p>

<h2 id="kickstand-ui">15. <a href="https://kickstand-ui.com/">Kickstand UI</a></h2>

<p>This UI framework is another one built with accessibility as a focus and includes about dozens of components and utilities.</p>

<p><a href="https://kickstand-ui.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/zpme22xq1f4ejtclgwqq.png" loading="lazy" alt="Kickstand UI" width="770"></a></p>

<p>This one is well worth delving into, as it has quite a nice array of components with good documentation and demos.</p>

<h2 id="nodesign.dev">14. <a href="https://nodesign.dev/">NoDesign.dev</a></h2>

<p>I’m not surprised this was as popular as it was. It’s advertised as “a collection of tools for developers who have little to no artistic talent.”</p>

<p><a href="https://nodesign.dev/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/lgqy8g0mj9eru9rmzphr.png" loading="lazy" alt="NoDesign.dev" width="770"></a></p>

<p>To be honest, the collection of tools is pretty standard and isn’t only for the non-artistic among us.</p>

<h2 id="aeon">13. <a href="https://github.com/lamplightdev/aeon">Aeon</a></h2>

<p>I find lots of date picker components, so kudos to this one for making it near the top of the list.</p>

<p><a href="https://github.com/lamplightdev/aeon"><img src="https://dev-to-uploads.s3.amazonaws.com/i/ivemdbr3cdslrpb964gn.png" loading="lazy" alt="Aeon" width="770"></a></p>

<p>This lightweight, dependency-free date/time picker is built with web components and can be used anywhere.</p>

<h2 id="frontendor">12. <a href="https://frontendor.com/">Frontendor</a></h2>

<p>This is another type of front-end toolkit, similar in popularity to the admin dashboards: landing page UI libraries.</p>

<p><a href="https://frontendor.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/5546etxq117htnwgzec9.png" loading="lazy" alt="Frontendor" width="770"></a></p>

<p>This one is a library of reusable HTML blocks and templates to help you build beautiful and professional landing pages quickly and easily by simply copying and pasting. Not free, but includes 100+ blocks and 6+ templates.</p>

<h2 id="wireflow">11. <a href="https://wireflow.co/">Wireflow</a></h2>

<p>Here’s yet another unique entry in the list: A free online and open source tool for creating beautiful user flow prototypes.</p>

<p><a href="https://wireflow.co/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/9g5p8spnvfu5hvgz0qg0.png" loading="lazy" alt="Wireflow" width="770"></a></p>

<p>Once you’ve dragged and dropped and customized your ‘flow’ diagram, just download the exported image. Great for presentations and you can also install the tool as a PWA.</p>

<h2 id="remake">10. <a href="https://remaketheweb.com/">Remake</a></h2>

<p>This tool offers a bold promise: To help you build apps and prototypes by going straight from HTML/CSS to dynamic web app.</p>

<p><a href="https://remaketheweb.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/6gy58l027cknkbn55b53.png" loading="lazy" alt="Remake" width="770"></a></p>

<p>Includes data syncing, built-in CRUD features, built-in file uploading, built-in user accounts, and more. You’ll have to really delve into their docs to see exactly what this is all about, but like I said, the promised result is pretty bold.</p>

<h2 id="css-scan-pro">9. <a href="https://cssscanpro.com/">CSS Scan Pro</a></h2>

<p>I included this one in the newsletter way back in February but it’s recently been updated to version 2.0.</p>

<p><a href="https://cssscanpro.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/dm4lqo48amj0wd58vfp5.png" loading="lazy" alt="CSS Scan Pro" width="770"></a></p>

<p>It’s an extension to “Inspect Element” for Chrome, Firefox, and Safari that lets you instantly get styles, font info, dimensions, animations, and selector for any element on the page. Not free, but developers seem to love it so far.</p>

<h2 id="web-code-tools">8. <a href="https://webcode.tools/">Web Code Tools</a></h2>

<p>This is a large set of code generators that includes CSS effects (gradients, animation, shadows, etc.), HTML tools (audio, video, etc.), Microdata, Twitter Cards, and more.</p>

<p><a href="https://webcode.tools/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/qllowx62l5zs4s5ystpq.png" loading="lazy" alt="Web Code Tools" width="770"></a></p>

<p>As shown by a few of the entries above, developers love online interactive generators, so there’s a lot to choose from in this collection.</p>

<h2 id="shadows">7. <a href="https://brumm.af/shadows">Shadows</a></h2>

<p>Here’s another code generator in the top ten. This online tool is based on an article (linked at the bottom of the tool’s page) that explains how using layered shadows can provide more fine-grained control on shadow smoothness.</p>

<p><a href="https://brumm.af/shadows"><img src="https://dev-to-uploads.s3.amazonaws.com/i/sa8b2uhmd17114a3aa3o.png" loading="lazy" alt="Shadows" width="770"></a></p>

<p>Pretty neat that someone was willing to bring a concept to life like this to make it much easier to use the technique that the original author came up with.</p>

<h2 id="fast">6. <a href="https://www.fast.design/">FAST</a></h2>

<p>This offering from Microsoft is a suite of tools to build enterprise-grade websites, applications, and more.</p>

<p><a href="https://www.fast.design/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/ph5e3vqrlwh84mf41uu5.png" loading="lazy" alt="FAST" width="770"></a></p>

<p>Built with standards-based web components compatible with a number of technologies, including React, Angular, <a href="http://ASP.NET">ASP.NET</a>, Aurelia, and more.</p>

<h2 id="css-scroll-shadows">5. <a href="https://css-scroll-shadows.now.sh/">CSS Scroll Shadows</a></h2>

<p>This is one of my favourite finds of the year. Scrolling areas are sometimes hard to notice at a glance. This online tool lets you create shadows to make those scrollable page areas more obvious that they’re scrollable.</p>

<p><a href="https://css-scroll-shadows.now.sh/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/t86ghewjaoil2g6qw6hn.png" loading="lazy" alt="CSS Scroll Shadows" width="770"></a></p>

<p>The tool lets you interactively adjust the background color and shadow color before you grab the code.</p>

<h2 id="css-layout">4. <a href="https://csslayout.io/">CSS Layout</a></h2>

<p>This is a really great collection of popular components, layouts, and patterns made with CSS. Not exactly a framework, just individual components that don’t have any dependencies and just use pure CSS.</p>

<p><a href="https://csslayout.io/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/fh3p3fuf0lti5okyrisu.png" loading="lazy" alt="CSS Layout" width="770"></a></p>

<p>Consists of 91 components that you can easily customize seeing as they’re just CSS.</p>

<h2 id="exoteric">3. <a href="https://github.com/c9fe/exoteric">Exoteric</a></h2>

<p>I’m pretty sure this one got as many clicks as it did because it was originally included under its old name: Dumbass.</p>

<p><a href="https://github.com/c9fe/exoteric"><img src="https://dev-to-uploads.s3.amazonaws.com/i/5x3lc1e20cmlbzr0rh96.png" loading="lazy" alt="Exoteric" width="770"></a></p>

<p>Nonetheless, it’s a decent tool that lets you build components from cross-browser web standards. No JSX, no Shadow DOM, no fancy frameworks.</p>

<h2 id="css.gg">2. <a href="https://css.gg/">css.gg</a></h2>

<p>This was the 2nd-most clicked tool of the year and was originally a CSS-only icon set that’s been expanded.</p>

<p><a href="https://css.gg/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/kh5zes90y13lguvprrg6.png" loading="lazy" alt="css.gg" width="770"></a></p>

<p>Now it includes 700+ open-source CSS, SVG, and Figma UI Icons. Available in SVG sprite, styled-components, and more.</p>

<h2 id="hacker-ui">1. <a href="https://hacker-ui.com/">Hacker UI</a></h2>

<p>I’m not surprised that the #1 most-clicked tool of the year was yet another UI library. This one is React-based and was originally advertised as one that isn’t closely coupled with any kind of branding, so it’s easy to integrate it with your own project.</p>

<p><a href="https://hacker-ui.com/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/t88jlohqvzdccdgobpnn.png" loading="lazy" alt="Hacker UI" width="770"></a></p>

<p>Interestingly, the GitHub repo says the project’s development is currently on hiatus. I hope that’s only temporary, as the interest in this one does seem to be moderately strong, showing signs of potential for a good permanent option.</p>

<h2 id="what-was-your-favourite-tool-of-the-year">What Was Your Favourite Tool of the Year?</h2>

<p>I’m always on the lookout for new stuff so if there’s anything in particular that you’ve enjoyed discovering, using, or even something you’ve personally made, feel free to drop it in the comments or hit me up <a href="https://twitter.com/WebToolsWeekly">via DM on Twitter</a>.</p>

<p>And be sure to <a href="https://webtoolsweekly.com/">subscribe to the newsletter</a> for a weekly roundup of the latest and the greatest in front-end tools and more.</p>