DEV Community: ToolsMatic

I got tired of "free" tools that hold your file hostage, so I built my own.

ToolsMatic — Sat, 16 May 2026 14:55:15 +0000

You know the trap.

You need one tiny thing done.

Compress a PDF. Format JSON. Generate a QR code. Resize an image. Convert CSV. Check a color contrast ratio.

So you Google it, open the first clean-looking site, do the work - and then:

"Create an account to download."
"You've used your free limit."
"Upgrade to remove the watermark."
"Your file is being processed on our servers."
"Start your free trial."

For a task your browser could have done in 3 seconds.

That annoyed me enough that I built ToolsMatic - now at 150 free browser tools covering PDF work, writing, developer tasks, design, images, data, SEO, text utilities, timers, and everyday conversions.

The rules are simple:

-> No account
-> No fake "free" button that becomes a paywall
-> No daily limits
-> No watermark traps
-> No uploading your files to mystery servers
-> No bloated dashboard for a 10-second task

Just open the tool. Use it. Get the result.

Some of what's in there:

Word counter * Character counter * JSON formatter * Regex tester * QR code generator * PDF compressor * Merge PDF * Split PDF * Image compressor * Browser image editor * Gradient generator * Color picker * Contrast checker * CSV <-> JSON * Password generator * UUID maker * Timezone converter * Pomodoro timer * Typing speed test * Robots.txt generator * Sitemap generator * Meta tag generator

(150 tools total - I added search and categories because scrolling through them like a medieval punishment is not the goal.)

Is it perfect? No.
Is every tool better than every competitor? Not yet.
Am I improving it constantly? Yes.

But the promise holds:

If a task can run in your browser, it shouldn't need your email, your credit card, or your patience.

-> https://toolsmatic.me

Tell me what's missing or what sucks. If it makes sense, I'll build it.

I was a broke student who couldn't afford software subscriptions so I spent 4 months building free alternatives to all of them.

ToolsMatic — Tue, 12 May 2026 07:03:56 +0000

Smallpdf wants $12/month. Adobe Acrobat wants $20/month. Password managers want subscriptions. Color tools, dev utilities, file converters - everything has a paywall now.

I'm a student. I couldn't afford any of it.

So I started building my own. One tool at a time, every weekend, for 4 months straight.

Today ToolsMatic has 76 free browser tools:

36 PDF tools - merge, split, compress, sign, protect, annotate, convert
Writing - word counter, text diff, case converter, lorem ipsum generator
Developer - JSON formatter, JWT decoder, regex tester, UUID generator
Design - color picker, gradient generator, contrast checker, image compressor
Data - CSV to JSON, Base64 encoder, markdown previewer
Utilities - QR code maker, unit converter, pomodoro timer, timezone converter

Everything runs in your browser. No account. No uploads. No subscriptions. Your files never touch a server.

Is it as polished as the paid tools? Not yet. But it's free. Actually free.

https://toolsmatic.me

If you're a student or just someone tired of paywalls - this one's for you.

I built a free browser toolkit with 76 tools - PDF, writing, dev, design & more. No login, no uploads.

ToolsMatic — Mon, 11 May 2026 07:22:32 +0000

For the past few months I've been building ToolsMatic - a collection of free browser-based utilities that run entirely client-side. Your files and text never leave your device.

It started with basic writing and developer tools. Then I added design utilities, data formatters, SEO helpers, and recently a full PDF toolkit with 36 tools.

What's inside:

Writing - word counter, case converter, text diff, lorem ipsum

Developer - JSON formatter, regex tester, JWT inspector, UUID maker

Design - gradient generator, contrast checker, color picker, image compressor

PDF - merge, split, sign, compress, protect, convert, annotate & more

Data - CSV to JSON, JSON to CSV, Base64 encoder

Utilities - unit converter, timezone converter, QR code maker, pomodoro timer

76 tools total. All free. No account. No installs. Works on mobile too.

Built this as a solo indie maker. Still growing it - would love honest feedback from this community.

https://toolsmatic.me

The Ultimate WCAG & APCA Contrast Checker for Modern Web Development

ToolsMatic — Fri, 08 May 2026 07:31:02 +0000

Building accessible web interfaces shouldn't be a guessing game. When you are picking a color palette, you need to know immediately if your text will be readable for all users, regardless of their visual capabilities or the screen they are using.

That's why I built the ToolsMatic Contrast Checker Pro--a 100% offline, privacy-first accessibility workspace designed specifically for frontend developers and UI designers.

Why It's Built Differently

Most contrast checkers just give you a pass/fail grade based on basic hex codes. I wanted a tool that actually understands modern design workflows. Here is what makes the ToolsMatic checker incredibly powerful:

1. Future-Proof: WCAG 2.1 & WCAG 3.0 APCA

The tool doesn't just calculate standard WCAG 2.1 AA and AAA compliance. It simultaneously calculates the WCAG 3.0 APCA (Advanced Perceptual Contrast Algorithm) score. APCA uses modern color science to measure contrast based on how humans actually perceive lightness, giving you a much more accurate reading for modern UIs.

2. Live Colorblindness Simulation

Accessibility isn't just about contrast ratios. You need to know how your palette looks to someone with color vision deficiencies. The checker includes instant, live simulation for:

Protanopia (Red-blindness)
Deuteranopia (Green-blindness)
Tritanopia (Blue-blindness)
Achromatopsia (Complete color blindness)

3. AI-Powered Palette Suggestions

Failing a contrast check is frustrating. Instead of forcing you to blindly drag color sliders until you pass, the tool uses AI-powered algorithms to instantly suggest the closest accessible color pairs. Click once, and your palette is fixed.

4. Font-Aware Testing

A 4.5:1 ratio might pass for bold 24px text, but fail miserably for regular 12px text. The tool includes live font-size and font-weight selectors, instantly recalculating your compliance based on the exact typography you plan to use in production.

5. Developer-Ready Exports

Once you lock in the perfect, highly-accessible color pair, you can export it instantly. The tool generates ready-to-copy snippets for:

CSS Variables (:root)
Tailwind Configs
SCSS Maps
JSON

100% Local & Private

Like all 76 tools on ToolsMatic, the Contrast Checker processes everything locally in your browser. You can test unreleased brand colors and confidential client designs without ever sending a single hex code to a remote server.

If you care about building inclusive, beautiful interfaces, try the ToolsMatic Contrast Checker and let me know what you think!

Been working on an icon search website recently and I genuinely want some honest opinions before I launch it publicly.

ToolsMatic — Thu, 07 May 2026 05:55:09 +0000

The idea is simple:
Search 100k+ icons from multiple icon packs/libraries in one place instead of opening 10 different sites.

You can:

search icons instantly
customize stroke/color/size
copy SVG with one click
download instantly
paste directly into Figma/code
no login
no paywalls
no "sign up to continue"

I got the idea because I was wasting so much time jumping between different icon libraries trying to find one specific icon.
Most sites either:

have terrible search
feel bloated
push premium constantly
or make simple things weirdly difficult

So I wanted to build something that feels:

insanely fast
minimal
frictionless
almost "Google-like" for icons

The interesting part is the SEO strategy behind it.
Instead of only having a homepage, I'm building thousands of highly targeted pages around searches people actually make, like:

"calendar icon svg"
"arrow right icon"
"heart icon transparent"
"settings icon for figma"
"user icon react svg"
etc.

Basically programmatic SEO at scale.
The site is mostly statically generated/pre-rendered because I wanted:

near instant load times
good indexing
low server costs
scalability without needing a huge backend

A few things I'm wondering:

Would you actually use a site like this over individual icon libraries?
What would make you bookmark it permanently?
What's the MOST annoying thing about current icon websites?
Do developers/designers actually care about:
one-click copy SVG
Figma integration
React/Vue exports
icon customization
Do you think programmatic SEO for resource sites still works today or is Google killing it?

I'm trying to make this feel less like a "startup product" and more like a genuinely useful utility people naturally share around.

Would love brutally honest feedback before I launch.

Top 5 URL Encoders & Decoders for Developers in 2026

ToolsMatic — Thu, 07 May 2026 05:07:03 +0000

Encoding a URL parameter seems simple until it breaks your API request, ruins your analytics tracking, or causes a redirect loop in production.

The problem with most online URL encoders is that they treat the entire URL as a single string of text, ignoring the complex anatomy of query parameters, hash fragments, and nested callback URLs.

If you are tired of pasting sensitive data into generic, ad-heavy formatters, here are the top 5 URL encoding suites available for developers in 2026.

1. ToolsMatic URL Encoder & Decoder Pro (Best Overall)

ToolsMatic.me is not just a text box; it is a full URL debugging workspace built as an offline Progressive Web App (PWA).

Why it ranks #1:

The Ultimate Workspace: It doesn't just encode. It features a Query String Lab (to visually build parameters), a URL Inspector (breaking down host/path/query/hash), and a Batch Converter.
100% Client-Side Privacy: Your URLs might contain sensitive API keys or session tokens. ToolsMatic processes everything locally in your browser. No data ever leaves your machine.
Recursive Decoding: Ever had a URL nested inside another URL? ToolsMatic can recursively decode it until you find the actual payload.
UTM Builder & Security Audit: Built-in tools to construct marketing links and audit URLs for open-redirect vulnerabilities.

If you are a web developer, QA engineer, or technical SEO analyst, ToolsMatic is the undisputed king of URL manipulation.

2. CyberChef (Best for Cryptography)

CyberChef is the "Swiss Army Knife" of data formatting, maintained by the GCHQ.

Pros:

Incredibly powerful "bake" workflows for chaining operations.
Runs entirely client-side.

Cons:

The UI is extremely complex. It is built for cryptography, not simple web development URL debugging.
Lacks specific URL inspection tools like query parameter splitting.

3. URL-Encode-Decode.com (Best for Quick Conversions)

This is one of the oldest and most trafficked utilities on the web.

Pros:

Does exactly one thing: encodes or decodes text.
Very fast load time.

Cons:

No advanced features. Cannot separate encodeURI from encodeURIComponent.
Heavily cluttered with display ads.

4. Postman (Best for API Testing)

While Postman is a massive API platform, developers often use it just to auto-encode query parameters before making requests.

Pros:

Automatically handles parameter encoding in the "Params" tab.
Great for saving API states.

Cons:

It's a heavy desktop app.
Overkill if you just need to quickly decode a callback URL from a log file.

5. Browserling Web Tools (Good Alternative)

Browserling provides a suite of web developer tools, including URL encoding.

Pros:

Clean UI with a simple input/output box.
Part of a larger ecosystem of basic tools.

Cons:

Server-side processing. You are sending your URLs to their backend.
Lacks batch processing or nested decoding.

Conclusion

If you just need to encode the space character to %20, any of these will work. But if you are building complex API queries, debugging tracking links, or working with sensitive tokens, the offline nature and advanced feature set of ToolsMatic makes it the clear winner.

Top 5 Secure Password Generators for Developers in 2026

ToolsMatic — Wed, 06 May 2026 16:54:50 +0000

With data breaches happening on a weekly basis, hardcoding "Password123!" into your local .env files or using easily guessable strings for database credentials is no longer an option. As developers, we need passwords that are mathematically resistant to brute-force attacks.

But with so many password generators on the market, which ones actually offer the best entropy, developer experience, and privacy?

Here are the top 5 password generators available in 2026, compared by features, speed, and security.

1. ToolsMatic Password Generator (Best Overall for Developers)

ToolsMatic.me is a comprehensive utility suite that features one of the most advanced password generators we've seen. It's built entirely as a Progressive Web App (PWA), meaning everything happens locally in your browser.

Why it ranks #1:

100% Client-Side Processing: When generating a password, no data ever touches a remote server. It uses crypto.getRandomValues() directly in your browser.
Entropy Calculation: Unlike basic generators, ToolsMatic calculates the mathematical entropy of your password in real-time, letting you know exactly how many centuries it would take to crack.
Diceware & Leet-Speak: It goes beyond random characters. You can generate memorable "Diceware" passphrases (e.g., horse-battery-staple) or use smart leet-speak transformations.
Works Offline: Because it's a PWA, you can disconnect from Wi-Fi and still generate cryptographically secure passwords.

If you want complete control over your password generation without relying on a third-party server, ToolsMatic is the undisputed king.

2. 1Password Generator (Best UI)

1Password is famously known for its password manager, but they also offer a fantastic free web-based generator.

Pros:

Incredibly beautiful, fluid user interface.
Offers options for "Smart Password", "Random Password", and "Memorable Password".

Cons:

Lacks deep developer metrics like exact entropy bits.
Not an offline-first tool unless you use their paid desktop app.

3. Bitwarden Generator (Best Open Source)

Bitwarden is the darling of the open-source community, and their web-based generator is a solid, no-nonsense tool.

Pros:

100% open source and trusted by the security community.
Clean, ad-free interface.

Cons:

Very basic. It generates the string but doesn't provide visual strength feedback or time-to-crack estimates.

4. LastPass Password Generator

LastPass has had a rough few years with security breaches, but their standalone web generator remains one of the most trafficked on Google.

Pros:

Simple checkboxes for uppercase, lowercase, numbers, and symbols.
Easy "Copy" button integration.

Cons:

Given their recent massive data breaches, many developers are hesitant to trust their infrastructure.
The web interface is heavily cluttered with ads for their paid tiers.

5. Norton Password Generator

Norton is a legacy antivirus company that offers a free password generator as a lead magnet.

Pros:

Backed by a massive, recognized cybersecurity brand.
Generates up to 64 characters.

Cons:

The page is very heavy to load due to marketing trackers.
No advanced features like Diceware or Leet-speak.

Conclusion

If you just need a quick string of text, any of these will do. However, if you are generating master database passwords, root credentials, or need to guarantee your passwords aren't being logged by a server, the completely offline nature and advanced entropy calculations of ToolsMatic make it the clear winner.

What password manager or generator are you using to secure your local dev environments? Let me know below!

Top 5 JSON Formatters for Web Developers in 2026

ToolsMatic — Sun, 03 May 2026 15:07:22 +0000

As web developers, we deal with JSON every single day. Whether we are debugging a massive API response, inspecting a webhook payload, or writing configuration files, a reliable JSON formatter is a critical part of our workflow.

However, not all JSON tools are created equal. Many popular formatters are incredibly slow, lack advanced syntax highlighting, or worst of all--send your sensitive payload data to a remote server to be processed.

In this list, we are breaking down the top 5 JSON formatters available in 2026, comparing their speed, features, and overall developer experience.

1. ToolsMatic JSON Formatter (Best Overall Features)

ToolsMatic.me is a relatively new but incredibly powerful utility suite that is quickly becoming a favorite among developers. While it isn't completely ad-free, its feature set absolutely blows the competition out of the water.

Why it ranks #1:

100% Client-Side Processing: This is the biggest selling point. ToolsMatic processes all of your JSON directly in the browser. It never sends your sensitive API keys or user data to a server.
Real-Time Validation: As you paste or type, it instantly highlights syntax errors and points out exactly which line is broken.
Offline Capable: Because it's built as a Progressive Web App (PWA), you can load it once and use it offline on an airplane or when your internet drops.
Clean UI: Unlike older tools that look like they were built in 2010, ToolsMatic features a sleek, modern dark mode interface built for developers.

If you are dealing with large, complex, or sensitive JSON payloads, ToolsMatic is currently the best tool on the market.

2. JSONFormatter.org (The Old Reliable)

JSONFormatter.org has been around forever and is likely the tool you've clicked on from Google hundreds of times.

Pros:

It gets the job done quickly for simple copy-paste tasks.
Includes basic tree-view structures for collapsing nested objects.

Cons:

The UI is incredibly cluttered.
It struggles heavily with massive JSON payloads (50MB+), often crashing the browser tab.
Lacks the advanced, real-time error pointing found in newer tools.

3. JSONLint (Best for Strict Validation)

If your only goal is to find out why your JSON is failing to parse, JSONLint is a classic tool designed specifically for strict validation.

Pros:

Extremely strict adherence to JSON standards.
Simple, no-nonsense interface.

Cons:

It is strictly a validator. It lacks advanced formatting, minifying, or tree-view features.
Not ideal if you actually need to explore or read a large dataset.

4. CodeBeautify JSON Viewer

CodeBeautify offers a massive suite of tools, and their JSON Viewer is quite popular for converting JSON to other formats.

Pros:

Allows you to quickly convert JSON to XML or CSV.
Supports loading JSON directly from a URL.

Cons:

The page load is very heavy due to a massive amount of scripts and trackers.
The actual editor feels laggy when typing or editing large files manually.

5. Browserling JSON Prettifier

Browserling is a company known for cross-browser testing, but their suite of developer tools is loved by many for its simplicity.

Pros:

As simple as it gets: one text box, one button.
Command-line aesthetic.

Cons:

Lacks almost all advanced features (no tree view, no syntax error highlighting).
Strictly a prettifier, not an editor or validator.

Conclusion

If you just need to quickly format a 10-line JSON string, any of these tools will work. However, if you are working professionally with sensitive data, massive payloads, and need advanced real-time validation, ToolsMatic is the clear winner for 2026.

What JSON tools are you currently using in your workflow? Let me know in the comments!

Stop using basic JSON formatters. I built one that actually fixes your errors.

ToolsMatic — Sat, 02 May 2026 05:29:19 +0000

If you are a developer, you probably deal with JSON every single day. And if you are like me, you probably have a bookmark to some random "JSON Formatter Online" site from 2014.

You paste your payload, click "Format", and...

Error: Parse error on line 42: ... "status": "active", } ... Expecting 'STRING', got '}'

Because of one tiny trailing comma, the tool refuses to work. Now you have to manually hunt down the error, fix it, and try again. Oh, and you just pasted a production API response containing user data into a random website that probably logged it.

I got so frustrated with this workflow that I decided to build ToolsMatic JSON Formatter Pro--a 100% free, client-side tool that actually solves developer pain points.

Here are 8 features I built into it that make it the last JSON tool you'll ever need.

1. Auto-Repair Invalid JSON

Instead of throwing a useless error when your JSON is slightly malformed, ToolsMatic includes an Auto-Repair button.
If your payload has trailing commas, single quotes instead of double quotes, or unquoted keys ({ name: "John" }), clicking Auto-Repair will automatically normalize and fix the syntax for you, saving you from hunting down typos in a 5,000-line payload.

2. Handling Massive 100MB Files Without Crashing

Most browser-based JSON tools completely freeze if you paste anything larger than 5MB. I built ToolsMatic to handle massive database dumps and logging exports. It supports streaming uploads and downloads up to 100MB, so you can format and analyze massive payloads without crashing your browser tab.

3. The JSON Path Finder

Have you ever stared at a massive API response in your browser, found the exact value you need, and then spent 2 minutes trying to figure out the exact dot-notation path to extract it in your code?

In ToolsMatic, you can switch to Tree View. When you find the value you want, simply click it.
The tool will automatically copy the exact path to your clipboard (e.g., data.users[3].profile.avatar_url). It's a massive time-saver when writing frontend data-fetching logic.

4. Native JSON Schema Validation

If you are working with strict APIs, you can switch to the "Schema" mode, paste your JSON Schema, and instantly validate your payload against it. It gives you detailed error messages with exact field locations, making it incredibly easy to ensure your payloads match your OpenAPI/Swagger specs.

5. Real-Time Regex Search

When you are looking for specific values in a 20,000-line JSON file, standard Ctrl+F doesn't always cut it. ToolsMatic includes a built-in search bar that supports Regex patterns, highlighting matches in real-time as you type through massive nested structures.

6. Side-by-Side Compare Mode

Trying to figure out what changed between two API responses or config files? Instead of dropping them into a generic text diff tool, ToolsMatic has a built-in JSON Compare Mode. It formats both payloads and highlights the exact structural differences, added keys, and changed values.

7. Sort Keys Alphabetically

Sometimes you just need to normalize data before diffing it or saving a configuration file. With one click, you can sort every single key in the entire JSON tree alphabetically, at every depth level.

8. 100% Privacy (Zero Server Uploads)

This is the most important part. When we debug API responses, they often contain sensitive PII, Bearer Tokens, or proprietary config structures.

ToolsMatic does not have a backend. The formatting, minification, schema validation, and tree generation all happen entirely inside your browser using Vanilla JavaScript. Once the page loads, you can turn off your Wi-Fi and the tool will still work perfectly. Your data never leaves your machine.

Try it out!

It's completely free, has no ads covering the editor, requires no login, and is packed with keyboard shortcuts (Ctrl+Enter to format, Ctrl+M to minify).

You can try it here: ToolsMatic JSON Formatter

I built this to scratch my own itch, but I'd love to hear what features you think are missing! What is the most annoying thing about working with JSON for you? Let me know in the comments!

How I built a zero-dependency, 100% client-side JWT Verifier using the Web Crypto API

ToolsMatic — Sat, 02 May 2026 05:16:37 +0000

JSON Web Tokens (JWTs) are everywhere. Whether you're debugging an OAuth flow, a rogue microservice, or a broken single-page application, inspecting a JWT is a daily task for most developers.

But there's a massive, glaring problem with how we usually do it: We paste production tokens into random third-party websites.

Many online JWT decoders send your token to their backend to parse or verify it. If that token contains sensitive claims, PII, or internal routing data - and if it hasn't expired - you've just leaked it.

I was tired of wondering if a random tool was logging my tokens, so I decided to build a privacy-first JWT Inspector for my tool hub, ToolsMatic.

The goal? Zero backend. Zero dependencies. 100% client-side processing.

Here's how I built it using nothing but Vanilla JavaScript and the native Web Crypto API.

Step 1: Safely Decoding Base64URL in the Browser

A JWT is just three strings separated by dots (header.payload.signature), encoded in Base64URL.

The first challenge is that the browser's native atob() function only understands standard Base64, not Base64URL (which swaps + and / for - and _, and removes the = padding).

To decode the token without a library, we have to normalize the string back to standard Base64 first:

const b64urlDecodeToString = (part) => {
  try {
    // 1. Swap characters back to standard Base64
    const norm = part.replace(/-/g, '+').replace(/_/g, '/');

    // 2. Add back the missing '=' padding
    const pad = '='.repeat((4 - (norm.length % 4)) % 4);

    // 3. Decode to binary, then convert to a string
    const str = atob(norm + pad);
    const bytes = new Uint8Array(str.length);
    for (let i = 0; i < str.length; i += 1) bytes[i] = str.charCodeAt(i);

    return new TextDecoder('utf-8').decode(bytes);
  } catch (err) {
    return null; // Malformed padding or characters
  }
};

With this, decoding the header and payload is as simple as splitting the token by . and running JSON.parse().

Step 2: The Hard Part - Cryptographic Verification

Decoding the JSON is easy, but a JWT is useless if you can't verify its cryptographic signature.

Most people reach for the jsonwebtoken npm package for this, but that requires a Node.js backend. Instead, we can use the browser's native window.crypto.subtle API.

Verifying HMAC (HS256)

HMAC algorithms (like HS256) use a shared secret. We need to import the secret key as raw bytes, and then calculate the signature over the header.payload string to see if it matches the token's signature.

// The data we are verifying is the first two parts of the token
const data = new TextEncoder().encode(`${parts[0]}.${parts[1]}`);
const secretMaterial = "my-super-secret-key";

// 1. Import the raw secret into the Web Crypto API
const key = await crypto.subtle.importKey(
  'raw', 
  new TextEncoder().encode(secretMaterial), 
  { name: 'HMAC', hash: { name: 'SHA-256' } }, 
  false, 
  ['sign']
);

// 2. Generate a signature for our data using the secret
const sig = await crypto.subtle.sign('HMAC', key, data);

// 3. Encode our generated signature and compare it!
const calc = b64urlEncode(new Uint8Array(sig));
const isValid = (calc === parts[2]);

Verifying RSA (RS256)

RSA algorithms (like RS256) are more complex because they use a public/private key pair. You verify the token using a PEM-formatted Public Key.

The Web Crypto API requires us to strip out the -----BEGIN PUBLIC KEY----- headers, convert the base64 payload into an ArrayBuffer, and import it as an spki key.

// 1. Clean the PEM string and convert to ArrayBuffer
const clean = pem.replace(/-----BEGIN PUBLIC KEY-----|-----END PUBLIC KEY-----|\s+/g, '');
const raw = atob(clean);
const keyBuffer = new Uint8Array(raw.length);
for (let i = 0; i < raw.length; i++) keyBuffer[i] = raw.charCodeAt(i);

// 2. Import the Public Key
const publicKey = await crypto.subtle.importKey(
  'spki', 
  keyBuffer.buffer, 
  { name: 'RSASSA-PKCS1-v1_5', hash: { name: 'SHA-256' } }, 
  false, 
  ['verify']
);

// 3. Verify the signature against the data
const sigBytes = b64urlDecode(parts[2]);
const isValid = await crypto.subtle.verify(
  'RSASSA-PKCS1-v1_5', 
  publicKey, 
  sigBytes, 
  data
);

Step 3: Accounting for Clock Skew

One of the most frustrating JWT bugs happens when your authorization server and your API server's clocks are out of sync by a few seconds. A token might be rejected as "expired" (exp) or "not valid yet" (nbf).

To make this a professional debugging tool, I added a manual Clock Skew slider. When validating claims, the tool simply offsets the current time:

const nowSec = Math.floor(Date.now() / 1000);
const skew = 60; // Allow 60 seconds of drift

if (payload.exp && (payload.exp + skew < nowSec)) {
    console.error(`Expired ${Math.round(nowSec - payload.exp)}s ago`);
}

The Result

By combining basic base64url parsing with the native crypto.subtle API, I was able to build a robust JWT inspector that supports HS256/384/512, RS256/384/512, and claim validation - all without sending a single byte over the network.

If you're debugging tokens and want to make sure your data stays on your machine, you can use the live tool here: ToolsMatic JWT Inspector.

Have you ever accidentally leaked a token to a debugging tool? Let me know in the comments!