Most frontend tooling conversations default to package managers, bundlers, and framework CLIs. But there is a whole category of browser-based utilities that handle smaller tasks without requiring installs, configs, or a new devDependency. These tools live in browser tabs and get used in the gaps: when you need to check a spec, generate boilerplate, or convert a value in the middle of building something else.
The ones below are tools I actually use or have used on production projects. The EvvyTools entries link to specific tool pages. Where I mention alternatives, I have used them enough to describe them accurately.
Photo by Markus Spiske on Pexels
Meta Tag Generator - for getting Open Graph and Twitter Card markup right the first time
Meta tags are easy to forget because they do not affect how a page looks in the browser. They only affect how a page looks when shared on social platforms or indexed by search engines. Getting them wrong means a link preview that shows no image, a truncated description, or a title that was pulled from the wrong element.
The Meta Tag Generator on EvvyTools generates the full set of meta tags, Open Graph tags, and Twitter Card tags simultaneously with live preview cards that show exactly how the result will render on Google, Facebook, and Twitter before you copy anything. You enter the title, description, URL, and image URL once, and it outputs all three markup sets with character count indicators for fields that have length limits.
"I recommend checking Open Graph output on staging before any launch. The number of times a page goes live with a missing og:image or a truncated og:description because nobody tested it in a link preview tool is genuinely surprising." - Dennis Traina, 137Foundry
The Open Graph protocol documentation covers the full tag spec. The Twitter Card documentation explains the specific tags Twitter requires and how they fall back to Open Graph tags when Twitter-specific ones are absent. These are worth reading once to understand what is required versus optional in each tag set.
CSS Custom Property Inspector (browser dev tools) - for debugging variable resolution
Chrome DevTools and Firefox Developer Tools both have built-in support for inspecting CSS custom properties, but the experience is different between browsers. Chrome's computed styles panel resolves custom property chains and shows the final computed value alongside the variable name. Firefox's panel shows the variable reference without always resolving the chain.
For debugging complex design token systems where one semantic token references a primitive token that references a raw value, Chrome's approach is more useful during active development. Chrome DevTools documentation on CSS inspection covers the specifics of how custom properties are displayed and how to live-edit them in the browser.
This is not a standalone tool, but treating the browser's inspection panel as a proper design token debugger rather than just a CSS editor changes how you approach component styling during development.
regex101.com - for testing patterns before putting them in code
Regular expressions are the category of programming construct where most developers' instinct is to write the pattern, test it on two examples, and ship it. regex101.com changes that by giving you an interactive environment where you paste your pattern and test string, and it shows you exactly what matched, what did not, and why - broken down group by group.
It supports multiple regex flavors (PCRE, JavaScript, Python, Java, .NET, and Go) and shows match information in real time as you type. The explanation panel on the right-hand side decodes what each token in your pattern does in plain English, which is genuinely useful when reading a pattern someone else wrote.
regex101.com is free for individual use. The Regex Tester on EvvyTools covers live match highlighting and a common patterns library for quick browser-based testing without leaving your development environment.
Color Converter and Palette Generator - for working with design system colors in all three formats
Frontend work increasingly involves maintaining a design system's color tokens, and color tokens exist in HEX, RGB, and HSL depending on which tool generated them. Converting between formats by hand is error-prone because the hex-to-decimal conversion for RGB is non-obvious, and reasoning about HSL values from a hex string requires mental math most people do not want to do mid-task.
The Color Converter and Palette Generator on EvvyTools converts between all three formats with a live picker and includes a palette generator that produces a 10-step tonal scale from any starting color, with WCAG contrast ratios at each step. This is useful when you have a brand color as a HEX value and need to extend it into a full design system palette.
The MDN color value reference covers the full range of CSS color formats including newer additions like oklch and display-p3 that are landing in major browsers.
Can I Use - for checking feature support before using it
Caniuse.com is where you go before using any CSS property, JavaScript API, or HTML attribute that might not have universal browser support. It shows support tables with percentage adoption rates, includes notes about partial support and known bugs, and links to the MDN page for each feature.
The Caniuse browser support tables are particularly useful for properties like backdrop-filter, container queries, subgrid, and any Web API that has been in specification but not all browsers for more than six months. The adoption percentage is a useful shorthand for "will this reach the majority of my users."
Bookmarking the search page directly (caniuse.com/?search=) is faster than navigating from the homepage.
Squoosh - for compressing images without installing anything
Image optimization is one of those tasks where the right answer (compress before deploying) is universally agreed upon and the actual practice is inconsistently followed because the tooling adds friction. Squoosh removes that friction by running entirely in the browser using WebAssembly.
Squoosh - built by the Google Chrome team - lets you compare compression settings and codecs (WebP, AVIF, MozJPEG, OxiPNG) side by side with a before/after slider showing the visual quality difference at each file size. You can batch process multiple images and download the results without creating an account.
For projects that cannot add build-step image optimization, Squoosh handles compression at upload time before an image goes anywhere near production.
Photo by Brett Sayles on Pexels
When to Use Each
These tools cover different parts of the frontend development loop. Meta tag generators fit into pre-launch checklists. The color converter belongs in the design system setup phase. Regex101 shows up whenever a pattern needs to be tested before going into code. Can I Use runs before any feature decision that might involve a browser compatibility risk. Squoosh runs whenever an image is ready to deploy.
None of them require accounts, installs, or ongoing maintenance. That is the point. The more of your toolbox that lives in browser tabs, the fewer things there are to configure and keep up to date.
For the color and design system work specifically, the guide on building a web color system using HEX, RGB, and HSL covers the concepts behind color format conversion and why it matters for maintaining a consistent design system - useful context if you are setting up token infrastructure for the first time.
Free tools do not need to be worse. Several of the ones above are equal to or better than paid alternatives for the specific tasks they handle. The right question is not free versus paid but rather whether the tool does the job without adding friction. These do.
Top comments (0)