Build your JWT Debugger with AI in under 5 minutes

Build a browser-side JWT debugger that decodes the header + payload, humanizes the claims (iss / sub / aud / exp), verifies HS256 / HS384 / HS512 signatures via SubtleCrypto, and shows an expiration countdown — wrapped in a token-vault visual identity no other JWT tool ships.

Como funciona

Passo 1

Descreva a sua ideia

Escreva um prompt em texto simples descrevendo o que pretende.

Passo 2

A IA cria

O FloopFloop gera código pronto para produção instantaneamente.

Passo 3

Implementar e lançar

O seu projeto é alojado no seu próprio subdomínio em minutos.

Por que criar com IA em vez de contratar um programador?

FloopFloopProgramador tradicional
Tempo até ao lançamentoMenos de 5 minutos2 a 8 semanas
CustoA partir de 0 $5.000 $ - 50.000 $+
ManutençãoIncluídaRetainer contínuo

What is a jwt debugger?

JWT debugger tools are one of the most-searched developer-utility categories on the web — somewhere in the multi-million queries per month for 'jwt decode' / 'jwt debugger' / 'jwt.io' across the English-speaking internet, with a long tail for the specific algorithm queries ('hs256 verify', 'jwt expiration', 'decode bearer token') and the platform-specific ones ('decode cognito token', 'auth0 jwt decode', 'okta jwt'). The category is dominated by a handful of operator-trusted hosted sites (jwt.io owned by Auth0/Okta, jwt.ms owned by Microsoft, jwtcheck, jwt-decoder, jwt-cli) that all run the same base64url + JSON.parse + SubtleCrypto stack under the hood. None of them ship a memorable visual identity beyond the genre's default 'three plain text panels on white'; all of them are THIRD-PARTY SITES that ingest whatever token you paste, which shows up in their TLS-terminating proxy logs, scrolls past coworkers in screen shares, and is generally a small operational-security risk every time it happens. The actual logic is small — JWT decoding is one regex-split + two base64url-decodes + two JSON.parses, the timestamp humanizer is a 20-line switch over Date.now diffs, the HMAC verifier is a 5-line SubtleCrypto call. Owning the page yourself means no ads, no signup, no third-party log entries for your tokens, and a visual signature (brass-bevelled token vault with a lock pill that glows green on verify) that nobody else has shipped.

Common features

  • Real-time decode on every keystroke — header / payload / signature panels update without a button press
  • Per-segment colour preview line so the three-part shape is one-glance obvious
  • Pretty-printed JSON for both header and payload (two-space indent, matches jwt.io)
  • Claim humanizer: registered claims (iss / sub / aud / exp / nbf / iat / jti) + OIDC + Auth0 + Okta + Cognito extensions
  • Timestamp claims render as ISO datetime + relative-time ("in 4 days" / "expired 12 minutes ago"), ticks once a minute
  • Optional HS256 / HS384 / HS512 signature verification via SubtleCrypto
  • Lock-pill verify status: Verified (green) / Signature mismatch (amber) / Algorithm-not-HS (err) / Enter secret (neutral)
  • Specific parse-error messages (not three parts, header not base64url, payload not JSON, …) with the offending segment number
  • URL-hash share link — recipient opens to the same decoded view
  • Browser-only — no fetch, no third-party script, no data collection, token never leaves the page

Real-world examples

On-call engineer debugging a 401 from a production API

Engineer copies the bearer from a failing request, pastes it into the debugger. Sees the expiration line in red: "Expired 8 minutes ago". Diagnosis: the client's refresh-token rotation broke; the API was rejecting correctly. Total time from paste to root-cause: ~5 seconds. The hosted alternatives need 15+ because of cookie banners + ad reflow.

Backend dev verifying their HMAC signing code

Backend dev wrote a new HS256 JWT signer in Go. Pastes a freshly-generated token + the secret into the debugger. The lock pill flips green: "Verified". They know the byte-level signing matches the canonical RFC 7515 + RFC 4648 base64url path. Without the debugger, the equivalent check is a multi-hour rabbit hole into base64url padding semantics.

Frontend dev inspecting an OIDC id_token claim shape

Frontend dev needs to know which claims their auth provider ships in the id_token (for a TypeScript type definition). Pastes an id_token from a dev login. The Claims panel humanizes every registered claim and lists the OIDC extensions (preferred_username, email_verified, given_name, family_name) alongside the provider-specific ones. Copies the JSON for the type-generator, done.

Why FloopFloop fits jwt debugger projects

The reason jwt.io and friends exist is that wrapping base64url decode + JSON.parse + SubtleCrypto in a webpage is a viable business model — ads, lead capture for the auth-provider operator, and minimal effort, nothing else. The unique thing FloopFloop ships on top of that is the *aesthetic*: a token-inspection vault — three brass-bevelled panels stacked vertically (header / payload / signature) on a deep near-black canvas, with a lock pill in the verify panel that glows green when the HMAC checks out and amber when it doesn't, JetBrains Mono on every code surface, sitting on a colour palette that reads as a literal token vault instead of a one-page docs site. Five colour variants (brass vault, blueprint, terminal green, paper light, gunmetal noir) cover the obvious dev-tribe skin choices without making every JWT tool on the internet look the same. The whole thing is client-side, so the visual IS the differentiator AND the security story: your token never leaves the page, which is the actual reason on-call engineers should stop pasting prod bearers into jwt.io.

Experimente estes prompts

Copie qualquer prompt abaixo e cole-o no FloopFloop para começar.

Build a jwt.io-style JWT debugger. Big monospace textarea at the top where the user pastes a token. Below it, a coloured-segments preview that splits the token into header / payload / signature with three distinct accent shades. Three stacked panels for the decoded result: Header (pretty-printed JSON), Payload (pretty-printed JSON), Signature (raw base64url). A sidebar panel with a Signature Check that takes an HMAC secret and verifies HS256 / HS384 / HS512 via SubtleCrypto (the browser-native primitive — no luxon / jose / jsonwebtoken dependency, keeps the JS payload under 50KB). A Claims panel that humanizes the registered claims (Issuer / Subject / Audience / Expires at / Not before / Issued at / JWT ID) with a relative-time line for the timestamp claims ("in 4 days" / "expired 12 minutes ago"). Share button writes the token to the URL hash + copies the share link. Visual: token vault — three brass-bevelled panels on a deep near-black canvas, a lock pill in the verify panel that glows green when the signature checks, amber when it doesn't, JetBrains Mono on every code surface.

Create a JWT claims explorer for an OAuth / OpenID Connect debug page. Paste an access token or id token, get back the parsed payload as a sortable claims table — registered claims first (iss / sub / aud / exp), then the OIDC extensions (email / name / preferred_username / scope), then anything else alphabetically. Per-row copy button on the value. Highlight expired tokens with a red banner. Browser-only — useful for the on-call engineer who needs to debug "why is this token being rejected" without pasting a customer's bearer into a third-party site.

Build a JWT generator + signer for a dev environment. Form inputs for the standard claims (issuer, subject, audience, expires-in-minutes, custom claims as JSON), an HS256 / HS384 / HS512 picker, and a secret. Generate + sign in the browser via SubtleCrypto, output the encoded token + a verify-roundtrip badge so the dev knows it'll decode cleanly. No server side; the page also decodes the most recent generated token in a side panel so you don't need to switch tools.

Build a JWT debugger with five visual variants: brass vault (default — bevelled brass panels on near-black canvas with amber lock pill), blueprint (deep indigo paper, white drafting ink), terminal green (VT220 phosphor on black), paper light (cream canvas, slate ink, blue accent), and gunmetal noir (near-black with electric cyan accent). Same three-panel stack + monospace expression treatment across all of them — only the panel bevel colour + accent shade swap so the cohort reads as one identifiable tool.

Perguntas frequentes

How is this different from jwt.io, jwt.ms, or jwtcheck?
Hosted JWT debuggers work — they're built on the same base64url + JSON.parse + SubtleCrypto stack this template uses — but they're ad-supported, surrounded by sign-up modals, and crucially they're THIRD-PARTY SITES you're pasting your token into. Even with a trustworthy operator (Auth0 owns jwt.io; Microsoft owns jwt.ms), the act of pasting a real production bearer into someone else's domain shows up in logs, scrolls past coworkers in screen shares, and routes through their CDN's TLS-terminating proxies. The version FloopFloop generates is yours: nothing leaves the browser, no ads, no signup, and the visual (token-inspection vault with brass-bevelled panels) is a register no other JWT tool ships — most of them look like one-page docs sites.
Which signature algorithms can it verify?
HS256, HS384, HS512 — the symmetric HMAC family. SubtleCrypto handles all three natively, so verification is a 5-line key-import + verify call. Paste the shared secret into the sidebar and the lock pill flips from neutral to green-Verified or amber-Mismatch in real time. RS* / ES* / PS* (RSA / ECDSA / RSA-PSS) verification is intentionally not included — those algorithms verify against the issuer's PUBLIC KEY, which must be fetched from the issuer's JWKS endpoint (`/.well-known/jwks.json` for OIDC). That would make the debugger a network-dependent tool requiring a server proxy for CORS, defeating the "runs in your browser, nothing leaves the page" promise. jwt.io ships example keys but doesn't actually fetch a real JWKS either — production RS* verification belongs server-side.
What claims does it humanize?
All seven RFC 7519 registered claims (`iss` / `sub` / `aud` / `exp` / `nbf` / `iat` / `jti`) plus the common OIDC / Auth0 / Okta / Cognito extensions: `azp`, `scope`, `email`, `email_verified`, `name`, `given_name`, `family_name`, `preferred_username`, `nickname`, `picture`, `locale`, `zoneinfo`, `updated_at`, `client_id`, `cid`, `uid`, `groups`, `roles`, `permissions`, `cognito:username`, `cognito:groups`. Anything not in the dictionary renders with the raw key name in the side panel — we deliberately don't guess. Timestamp claims (`exp`, `nbf`, `iat`, `auth_time`, `updated_at`) automatically render as a human-readable ISO datetime plus a relative-time line ("in 4 days" / "expired 12 minutes ago") that ticks once a minute without a page refresh.
Can I share a token with a colleague to debug together?
Yes — the Share button writes the current token to the URL hash and copies the full URL to your clipboard. A colleague opens the link and lands on the same decoded view + claims + verify state. By spec the URL fragment is never sent to the server, so the share itself doesn't leak the token to your hosting either. CAUTION: this is plain-text token sharing — only do it inside trusted channels (private Slack DM, encrypted notes), the same way you'd share a password. The Share UX is meant for dev / staging tokens, not production bearers.
Does it handle expired tokens differently?
Yes. The `exp` claim's relative-time line flips to red and reads "Expired N minutes ago" instead of "in N minutes" when the token is past its `exp`. The Claims panel surfaces this on first paint so a quick scroll-to-claims tells you at a glance whether you're debugging a current token or a stale one. The expiration logic uses the user's local clock (browser `Date.now()`), which is the same clock the JWT spec expects servers to compare against — if a token is failing verification on the server because of clock skew, the debugger will reproduce the comparison correctly.
Is my token sent anywhere?
No. The parse, the JSON pretty-print, the claim humanizer, the SubtleCrypto verify, the URL-hash share — all of it runs as plain JS in the browser. There's no fetch to anywhere except `/api/health` (which doesn't see your token). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work. Even the auto-decode happens on every keystroke as a pure-function transform; there's no debounced server round-trip the way some hosted debuggers structure it.

Construtores relacionados

Explorar mais categorias

Cron Expression Builder

Build a browser-side cron expression builder + debugger with plain-English translation, next-5-fire-times preview, common presets, and per-field validation — wrapped in a sysadmin-terminal visual identity no other cron tool ships.

JSON Formatter

Build a browser-side JSON formatter, validator, and tree explorer with exact-coordinate error reporting, pretty / minify / tree views, sort-keys, and one-click copy — wrapped in an architect's blueprint visual identity nobody else ships.

Password Generator

Build a browser-side password and passphrase generator with crypto.getRandomValues randomness, a Diceware passphrase mode, an entropy strength meter, and one-click copy — wrapped in a bank-vault visual identity nobody else ships.

Color Palette Generator

Build a browser-side colour palette generator with six harmony schemes (analogous, complementary, triadic, split-complementary, monochromatic, tetradic), per-card lock + reroll, URL-hash sharing, and CSS / Tailwind / JSON export — wrapped in a Pantone swatch-book visual identity nobody else ships.

QR Code Generator

Build a QR code generator that encodes URLs, plain text, WiFi networks, or contact cards (vCard) entirely in the browser — with a CRT-terminal aesthetic, customisable colour and error-correction level, and PNG + SVG download.

Word Counter

Build a browser-side word, character, sentence, paragraph, reading-time, and readability analyser — with stop-word-filtered keyword frequency and one-click export, in a typewriter-manuscript visual style nobody else ships.

Pronto para criar?

Comece a criar o seu projeto agora — sem necessidade de programação.

Generate this for me

Começar a Criar