🛡️ JWT Decoder & Inspector

🚀 High-Performance, 100% Client-Side JSON Web Token Inspector & Validator

Zero Server Calls • Zero Data Logging • Instant Offline-Ready In-Browser Decoding

🔗 Try Live Demo • 📖 Documentation • ⚡ Quick Start • 🧪 Testing • 🌐 Socials

---

Important

🔒 100% Client-Side Privacy Guarantee
Your tokens, keys, and payload claims never leave your browser. All Base64Url parsing, UTF-8 conversion, JSON syntax highlighting, and timestamp checks are computed locally in client-side memory using the web browser's native engine. No backend API or third-party tracking is used.

---

🌟 Key Features

⚡ Instant Local Decoding Decodes standard JWTs in real-time as you type. No submit button required. Full offline support after dependency installation.	🎨 Color-Coded Token Breakdown Visually segments tokens into HEADER, PAYLOAD, and SIGNATURE with live character counts and byte sizes.
⏰ Live Timestamp Evaluation Real-time relative calculation for exp (Expiration), nbf (Not Before), and iat (Issued At) with auto-ticking relative tags (e.g. "Expired 2 hours ago", "Expires in 3 days").	🔍 Deep Claims Inspector Built-in registry of RFC 7519 & OpenID Connect registered claims with instant search, filtering (All / Standard / Custom), and human-readable descriptions.
🌍 Robust Unicode & Emoji Support Handles international UTF-8 character encodings (Japanese Kanji, German umlauts, Spanish accents, and emojis) without throwing URIError.	📋 One-Click Copy Utilities One-click clipboard copy for formatted Header JSON, Payload JSON, raw signature segments, and individual claim values with visual feedback.

---

🧭 Live Demo & Official Reference

You can try the live, fully interactive version of this tool online at:

🔗 https://himat.tech/free-tools/jwt-decoder

---

🧩 Color-Coded Structure Overview

A standard JSON Web Token is comprised of three dot-separated Base64Url-encoded sections:

$$\text{\color{#fb7185}HEADER} \ . \ \text{\color{#c084fc}PAYLOAD} \ . \ \text{\color{#2dd4bf}SIGNATURE}$$

Section	Color	Purpose	Example Contents
Header	🔴 Rose	Token type & signing algorithm	{"alg": "HS256", "typ": "JWT"}
Payload	🟣 Purple	Claims, user identity, & timestamps	{"sub": "12345", "name": "Alex", "exp": 1819440000}
Signature	🟢 Teal	Binary cryptographic verification digest	dBjftJeZ4CVP-mB92K27uhbUJU1p1r...

---

🔐 Supported Algorithms for Inspection

Because decoding a standard Base64Url-encoded token structure does not require knowing the signing secret or private key, this application supports decoding tokens from all standard RFC 7518 JWS algorithms:

• HMAC (Symmetric): HS256, HS384, HS512
• RSASSA-PKCS1-v1_5 (Asymmetric): RS256, RS384, RS512
• ECDSA (Asymmetric): ES256, ES384, ES512
• RSASSA-PSS (Asymmetric): PS256, PS384, PS512
• Edwards-Curve: EdDSA (Ed25519, Ed448)
• Unsecured: none

---

🚀 Getting Started

Prerequisites

• Node.js: v18.0.0 or higher
• npm: v9.0.0 or higher

Installation & Local Setup

1. Clone the repository:

git clone https://github.com/himat-technology/jwt-decoder.git
cd jwt-decoder

2. Install dependencies:

npm install

3. Launch local development server:

npm run dev

Open your browser and navigate to http://localhost:3000.

---

🏗️ Production Build

To generate an optimized, zero-dependency static production bundle:

npm run build

The compiled assets will be in the dist/ folder and can be deployed instantly to Vercel, Netlify, Cloudflare Pages, GitHub Pages, or any static file server.

To preview the production build locally:

npm run preview

---

🧪 Running Automated Tests

Run the complete Vitest test suite:

npm run test

To run tests with interactive watch mode:

npm run test:watch

Test Suite Coverage:

• jwtDecoder.test.ts: ASCII Base64Url decoding, UTF-8 / multi-byte Unicode strings, malformed token sections, invalid Base64, and JSON syntax errors.
• jwtValidation.test.ts: Algorithm metadata, RFC 7519 standard claims vs. custom application claim detection.
• timestampUtils.test.ts: Human-readable date formatting, exp expiration logic, nbf future/active validation, and relative time calculations.

---

📁 Architecture & File Structure

jwt-decoder/
├── src/
│   ├── components/
│   │   ├── Header.tsx              # Sticky brand navbar with client-side status & socials
│   │   ├── JwtInput.tsx            # Live JWT textarea, sample selector, paste & clear
│   │   ├── TokenStructure.tsx      # Color-coded token breakdown (Header.Payload.Signature)
│   │   ├── JsonViewer.tsx          # Syntax-highlighted JSON viewer with line numbers & copy
│   │   ├── ClaimInspector.tsx      # Claims explorer with search, filters, and RFC descriptions
│   │   ├── TimestampStatus.tsx     # Real-time auto-updating timestamp cards (exp, nbf, iat)
│   │   ├── CopyButton.tsx          # Accessible clipboard copy button with feedback
│   │   ├── FeatureSection.tsx      # 6 core feature showcase cards
│   │   ├── HowItWorks.tsx          # 3-step walkthrough guide
│   │   ├── FAQ.tsx                 # Accordion FAQ answering security & algorithm questions
│   │   └── Footer.tsx              # Security disclaimers, links & credits
│   ├── hooks/
│   │   └── useJwtDecoder.ts        # Custom hook for reactive decoding & 5s timestamp ticker
│   ├── utils/
│   │   ├── jwtDecoder.ts           # Base64Url decoding, UTF-8 parsing, and diagnostics
│   │   ├── jwtValidation.ts        # RFC 7519 / OIDC claim registry and algorithm metadata
│   │   ├── timestampUtils.ts       # Human date formatting, relative time calculation
│   │   ├── sampleJwt.ts            # High-quality standard, expired, and unicode demo tokens
│   │   └── __tests__/              # Comprehensive Vitest unit test suite
│   │       ├── jwtDecoder.test.ts
│   │       ├── jwtValidation.test.ts
│   │       └── timestampUtils.test.ts
│   ├── types/
│   │   └── jwt.ts                  # Comprehensive TypeScript interfaces
│   ├── App.tsx                     # Main page orchestrator
│   ├── main.tsx                    # React DOM root mounting
│   └── index.css                   # Global Tailwind CSS and custom styling
├── public/
│   └── favicon.svg                 # Custom SVG brand favicon
├── package.json                    # Project dependencies and npm scripts
├── vite.config.ts                  # Vite + Vitest config
├── tsconfig.json                   # Strict TypeScript configuration
├── tsconfig.node.json              # TypeScript Node bundler config
├── tailwind.config.js              # Color palette, dark theme, and fonts
├── postcss.config.js               # PostCSS setup
├── eslint.config.js                # ESLint configuration
├── README.md                       # Comprehensive documentation
└── .gitignore                      # Git ignored files

---

⚠️ Security Notice

Warning

Decoding is NOT Cryptographic Verification:
Decoding a JSON Web Token merely reveals what is encoded in its header and payload. Anyone can fabricate or alter an unverified payload. Never trust unverified JWT payloads in backend authorization decisions without cryptographically validating the signature with your secret key (HMAC) or public key (RSA/ECDSA).

---

🌐 Community & Connect

Stay connected with HiMat Technology for updates, developer tools, and open-source releases:

Platform	Link
🌐 Official Website	himat.tech
⚡ Live JWT Tool	himat.tech/free-tools/jwt-decoder
🐙 GitHub	@himat-technology
💼 LinkedIn	company/himat-technology
📸 Instagram	@himat_technologies
📘 Facebook	Himat-technology

---

📄 License

This project is licensed under the MIT License — free for personal and commercial use.

_{Built with ❤️ by HiMat Technology}