DEV Community: Simran Kaur

10 Free Developer Tools That Run 100% in Your Browser (No Signup, No Upload)

Simran Kaur — Tue, 09 Jun 2026 05:37:37 +0000

We have all done it. You are mid-debug, you need to pretty-print a chunk of JSON, so you paste it into the first "JSON formatter online" result you find. Then you remember that JSON had an auth token in it. Now it lives on someone else's server.

That nagging feeling is why I keep coming back to tools that run entirely in the browser. No upload, no account, no "we value your privacy" banner hiding a tracker. The page loads, JavaScript does the work on your machine, and nothing gets sent anywhere.

Below are 10 of these I actually use, all from Pixellize. They are free, there is no signup, and you can open your network tab and watch them make zero requests while they work. Open one in a tab and pin it.

1. JSON Formatter, Validator, and Tree View

The everyday one. Paste minified JSON, get it back indented, validated, and as a collapsible tree so you can actually navigate a deep payload.

// in
{"user":{"id":7,"roles":["admin","editor"],"active":true}}

// out
{
  "user": {
    "id": 7,
    "roles": ["admin", "editor"],
    "active": true
  }
}

The validator catches the trailing comma you cannot see at 2am. Tool: JSON Formatter.

2. CSS Compressor

Strips whitespace, comments, and the last newline from a stylesheet before you ship it. Handy when a build step is overkill and you just want a quick minified blob.

/* before */
.btn {
  color: #754ffe;
  padding: 12px 20px;
}

/* after */
.btn{color:#754ffe;padding:12px 20px}

Tool: CSS Compressor.

3. Hash Generator

MD5, SHA-1, SHA-256, and friends from any string, computed in the browser with the Web Crypto API. Good for checksums, cache keys, or comparing a file hash without installing anything.

sha256("hello") = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

Because it runs locally, you can hash something sensitive without it touching a server. Tool: Hash Generator.

4. Unix Timestamp Converter

The one I open three times a day. Paste a 1717900000, get a human date in your timezone and UTC. Go the other way too.

1717900000  ->  Sat, 08 Jun 2024 23:46:40 UTC

No more new Date(ts * 1000) in the console just to read a log line. Tool: Unix Timestamp Converter.

5. CSS Grid Generator

A visual way to build a grid-template and copy the CSS out. You drag the columns and rows, set gaps, and it hands you working code instead of you counting fr units by hand.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

Tool: CSS Grid Generator.

6. Case Converter

Rename-variable energy. Flip text between camelCase, snake_case, kebab-case, PascalCase, and UPPER/lower in one click. Saves you from hand-editing a list of 30 field names.

user profile id  ->  userProfileId  /  user_profile_id  /  user-profile-id

Tool: Case Converter.

7. Password Generator

Generates strong random passwords (and decent API-key-style strings) using the browser's crypto randomness, not Math.random(). Set the length, toggle symbols, copy. Since it never phones home, the value you generate is only ever in your clipboard.

Tool: Password Generator.

8. QR Code Generator

Drop in a URL, get a QR code you can download. Useful for a quick "open this on your phone" during testing, linking a staging build, or a deploy that needs a device check. Generated client-side, so a private staging URL does not leak to a QR service.

Tool: QR Code Generator.

9. Color Palette Generator

Build a coherent palette when you do not have a designer on call. Pick a base color, get tints, shades, and matching accents with their hex values ready to paste into your tokens.

:root {
  --brand: #754ffe;
  --brand-600: #5f3fe0;
  --brand-100: #efe9ff;
}

Tool: Color Palette Generator.

10. Lorem Ipsum Generator

The unglamorous workhorse. Generate placeholder paragraphs, sentences, or words to fill a layout before the real copy shows up. Pick the count, copy, move on.

Tool: Lorem Ipsum Generator.

Why "in the browser" actually matters

It is not just a privacy nicety. Client-side tools are also:

Faster. No round trip to a server, so the result is instant even on a flaky connection.
Offline-friendly. Once the page is loaded, most of these keep working with the network off.
Honest about your data. You can verify the claim yourself: open DevTools, watch the Network tab, run the tool, and see nothing leave the page.

That last point is the one I care about most. "We do not store your files" is a promise. Zero network requests is a fact you can check.

The rest of the kit

Pixellize has around 130 of these in total, including PDF tools, image utilities, and SEO checkers, all the same way: free, no signup, in your browser. If you live in the browser dev tools all day, the full toolbox is worth a bookmark.

What is the one small utility you open every single day? Drop it in the comments. I am always looking for the next tab to pin.

Every YouTube video has 5 thumbnails sitting at predictable URLs (and how to grab them in 10 lines)

Simran Kaur — Mon, 01 Jun 2026 09:35:51 +0000

You've probably searched for a YouTube thumbnail downloader at some point. Maybe you wanted to study a competitor's design, build a research collection, or just save a thumbnail of your own video before re-uploading. The first 10 results in Google are all the same: a site with a paste-URL input, a "Generate" button, and 14 third-party scripts that load before the download link appears.

Here's the thing: YouTube serves the same five thumbnail files at predictable URLs for every public video. No auth, no API key, no rate limit. The URL pattern hasn't changed since 2014.

The downloader sites are wrappers around img.youtube.com. You can skip them entirely.

The URL pattern

https://img.youtube.com/vi/<VIDEO_ID>/<QUALITY>.jpg

<VIDEO_ID> is the 11-character ID that appears in every YouTube URL. <QUALITY> is one of these:

Filename	Dimensions	Always available?
`maxresdefault.jpg`	1280×720	Only if creator uploaded a custom HD thumbnail
`sddefault.jpg`	640×480	Yes
`hqdefault.jpg`	480×360	Yes
`mqdefault.jpg`	320×180	Yes
`default.jpg`	120×90	Yes (used in playlist UI)

Try it now. Paste this in your browser bar (it's PSY's "Gangnam Style" — definitely public):

https://img.youtube.com/vi/9bZkp7q19f0/maxresdefault.jpg

There's the thumbnail. Right-click, Save Image As, done.

Extracting the video ID from any URL

YouTube has at least 7 URL formats — standard watch, share link, Shorts, embed, music, mobile, old player. The 11-character ID lives in a different position depending on format. One regex catches them all:

const extractYouTubeId = (url) => {
  const match = url.match(/(?:v=|youtu\.be\/|shorts\/|embed\/|\/v\/)([\w-]{11})/);
  return match?.[1];
};

// Test cases
extractYouTubeId('https://youtube.com/watch?v=9bZkp7q19f0');         // → '9bZkp7q19f0'
extractYouTubeId('https://youtu.be/9bZkp7q19f0?t=42');                // → '9bZkp7q19f0'
extractYouTubeId('https://youtube.com/shorts/abc123xyz4_');           // → 'abc123xyz4_'
extractYouTubeId('https://youtube.com/embed/9bZkp7q19f0');            // → '9bZkp7q19f0'
extractYouTubeId('https://music.youtube.com/watch?v=9bZkp7q19f0');    // → '9bZkp7q19f0'
extractYouTubeId('https://m.youtube.com/watch?v=9bZkp7q19f0');        // → '9bZkp7q19f0'

The character class [\w-]{11} matches exactly 11 characters of word-chars or hyphens (YouTube IDs use letters, numbers, hyphen, underscore — and are always 11 chars long).

The 10-line bookmarklet

Drop this in your browser bookmarks bar. Click it on any YouTube watch page and the maxresdefault thumbnail opens in a new tab:

javascript:(function() {
  const m = location.href.match(/(?:v=|youtu\.be\/|shorts\/|embed\/)([\w-]{11})/);
  if (m) {
    window.open(`https://img.youtube.com/vi/${m[1]}/maxresdefault.jpg`, '_blank');
  } else {
    alert('Not a YouTube video URL');
  }
})();

To install: create a new bookmark, name it "YT Thumb", paste the entire javascript:... string above as the URL. Click it on any YouTube page.

The 404 gotcha nobody mentions

About 40% of YouTube videos return a 404 at /maxresdefault.jpg. This trips up every naive downloader.

The HD thumbnail file only exists when the creator uploaded a custom thumbnail at 1280×720 or larger. Auto-generated thumbnails (the three frame previews YouTube picks when you don't upload one) and pre-2014 uploads don't have a maxres file.

The fix: check sizes in priority order and use the first one that returns 200.

const sizes = ['maxresdefault', 'sddefault', 'hqdefault', 'mqdefault', 'default'];

async function getBestThumbnail(videoId) {
  for (const size of sizes) {
    const url = `https://img.youtube.com/vi/${videoId}/${size}.jpg`;
    const res = await fetch(url, { method: 'HEAD' });
    if (res.ok) return { url, size };
  }
  return null;
}

Note the method: 'HEAD' — you only care about the status code, not the file body. Saves bandwidth and latency.

CORS, or why you can't fetch the image client-side

If you try this in a browser script:

fetch(`https://img.youtube.com/vi/${id}/maxresdefault.jpg`)
  .then(r => r.blob())
  .then(blob => /* download blob */);

…you'll get a CORS error. img.youtube.com doesn't set Access-Control-Allow-Origin, so the response body is hidden from JavaScript. The HEAD check above works because you're only checking status; the image itself can't be read into a Blob.

Three workarounds:

window.open(url) — opens the image in a new tab, user right-clicks to save. No CORS issue because the browser is fetching for display, not for JS.
<a download> link — set href to the image URL, click programmatically. Same idea: browser handles the download, JS doesn't touch the bytes.
Server proxy — your backend fetches the image (no CORS at server-to-server), returns it to your frontend with proper CORS headers. Required if you want to repackage as ZIP or apply edits.

YouTube Shorts

Shorts use the same backend as regular videos. The thumbnail file pattern is identical — only the URL format changes (youtube.com/shorts/<ID> instead of ?v=<ID>). The regex above already handles this case.

One thing to know: even though Shorts display in portrait (9:16), the file YouTube serves is still landscape 16:9 with letterboxing or padding. If you want the actual portrait frame, you need the YouTube Data API.

Show DEV: my hosted version

I built Pixellize YouTube Thumbnail Downloader for the times when "paste a URL, click download" is faster than touching a bookmark. It runs the fallback chain automatically, parses every YouTube URL format the regex above catches, shows you what's available before you commit to a download, and has zero analytics scripts in the page. No signup, no daily limit, no watermark.

I built it because the existing free downloaders all violate one of these:

Multiple ads above the download link
Aggressive newsletter popups
Account required for "premium" sizes
Mobile redirects to apps

Three rules I wrote it under: don't load third-party scripts (zero tracking pixels), don't gate any quality behind a signup, render the result faster than the ads on competitor sites would have loaded.

Source code for the bookmarklet above + the fallback function are MIT licensed; you can wire them into your own tool. The hosted version handles the edge cases (CORS workaround via server fetch, age-restricted video detection, deleted-video graceful failure) so users get a working result without troubleshooting.

What I learned

The simplest URL pattern beats every "tool" abstraction. Knowing img.youtube.com/vi/<ID>/<QUALITY>.jpg makes 90% of "free YouTube thumbnail downloader" sites obsolete for developers.
CORS is the only meaningful ceiling. Once you accept that the browser can't read the image bytes directly, you stop fighting it and use window.open or <a download>.
The 40% maxresdefault gap is real. If you're building a tool, the fallback chain is the difference between "works for most videos" and "works for every public video".
A 10-line bookmarklet replaces a 200-script download site. Sometimes the right answer is a one-liner pasted in your bookmark bar, not a SaaS subscription.

If you want the hosted version, here it is: pixellize.io/youtube-thumbnail-downloader. If you'd rather build your own, the code above is everything you need.

Happy to answer questions about the implementation in the comments.

Auto-Convert Every WordPress Upload to WebP (Free, No Cloud Service)

Simran Kaur — Fri, 29 May 2026 12:45:56 +0000

If you have ever run a Lighthouse audit on a content-heavy WordPress site, you know the usual verdict: "Serve images in next-gen formats." Translation: your JPEGs and PNGs are too heavy, and WebP would cut them down a lot.

The problem is that nobody wants to convert images by hand, and most automated options either run as a bulk job you have to remember to trigger, or push your images to a cloud service with a monthly quota.

I wanted something simpler: upload an image, get a WebP, done. So I built a free plugin called Pixellize Image Optimizer, and this post walks through the problem, how the plugin solves it, and how it works under the hood.

Why WebP is worth it

WebP files are usually 25 to 35 percent smaller than the equivalent JPG or PNG at the same visual quality.
On an image-heavy page that is a real difference:

Faster Largest Contentful Paint, which is one of the Core Web Vitals Google uses for ranking.
Less bandwidth, which matters if you pay for CDN traffic.
No visible quality loss at sensible quality settings.

Browser support is no longer a concern. Every current browser handles WebP.

The approach: convert on your own server, on upload

Instead of a cloud API, the plugin converts images locally with the PHP GD or Imagick extension (almost every host has one). There is no account, no API key, and no paid tier.

The core flow:

You upload an image to the Media Library as usual.
The plugin generates a WebP version of the full image and every thumbnail size.
Your front end serves the WebP automatically.

How it works under the hood

For WordPress developers, here is the interesting part. The plugin hooks into the standard upload and rendering pipeline rather than fighting it:

On upload, it taps into the attachment metadata generation so it can convert the full image and every registered sub-size, not just the original. That matters because responsive images use srcset, and a half-converted set defeats the purpose.
On the front end, it rewrites image URLs to the WebP version through the same filters WordPress already uses: attachment image source, the responsive srcset, and post content. If a WebP does not exist for a given file, the original is served, so nothing breaks.
File naming mirrors the original: image.jpg becomes image.webp, and a duplicate upload that WordPress renames to image-1.jpg gets image-1.webp. No surprises.

Keep your originals, or save the space

This is the part I am happiest with in version 0.4. You get to choose:

Replace mode (default): the upload becomes a single WebP and the original is removed to save disk space.
Keep mode: the original stays in your Media Library, a WebP is built alongside it, visitors are served the WebP, and you can put any image back to its original whenever you want.

In keep mode there is a one-click Restore action in the Media Library that points an attachment back at its source file and rebuilds its sizes. And when you delete an image, the plugin cleans up the WebP copies with it, so you do not end up with orphaned files piling up on disk.

Getting started

Install "Pixellize Image Optimizer" from the WordPress plugin directory and activate it. It checks for GD or Imagick before activating.
Optionally visit Tools then Pixellize Image Optimizer to set the WebP quality. The default of 85 is a good balance for most sites.
Upload images the way you always do.

That is the whole workflow. The settings page also shows a savings panel: how many images were converted and how much storage you have saved.

A note on quality

Quality is adjustable from 0 to 100. A value between 80 and 90 keeps images looking clean while still cutting file size meaningfully. Going below 60 starts to show visible artifacts on detailed photos, so I would not push it lower without checking the results.

What is next

Bulk conversion of images you uploaded before installing the plugin is the next big feature on my list, followed by an option to resize oversized images on upload.

Try it

The plugin is free and open source (GPL):
https://wordpress.org/plugins/pixellize-image-optimizer

If you try it, I would genuinely like to hear what works, what breaks, and what you would want next. Drop a comment or open a thread on the plugin support page.

Set published: false so you can preview on dev.to first, then flip to true. Want me to add a cover image line, a code snippet showing the WordPress filter usage, or trim it shorter for a quicker read?