Decode, modify, and re-sign JSON Web Tokens (JWT) easily. A free browser-based tool to edit JWT header and payload data securely without any server-side processing.
AI Generation Prompt
JWT Header and Payload Editor & Re-signer
Overview
A high-performance, browser-based utility for developers to inspect, manipulate, and re-sign JSON Web Tokens (JWTs). This tool provides a clean interface for base64url decoding, JSON editing, and crypto-signing.
Technical Constraints & Compliance
- Strictly Client-Side: All logic must be contained in a single HTML file using Vanilla JavaScript.
- Zero Storage: No
localStorage,sessionStorage, or cookies. In-memory state only. - Sandbox Ready: Must operate without
alert(),confirm(), orprompt(). All user interactions must be via custom DOM modals/UI components. - Dependencies: Use CDN links for
jsrsasign(for crypto/signing) andTailwind CSS(for styling).
Feature Set
- Real-time Decoder: Instant decoding of the Header, Payload, and Signature segments upon pasting a token.
- Editable JSON Fields: Two separate code-editor-style text areas for the Header and Payload JSON objects.
- Algorithm Selection: Dropdown for selecting signing algorithms (e.g., HS256).
- Secret Key Input: Secure text field for providing the signing key.
- Re-sign Functionality: A "Re-sign & Generate" button that updates the signature field based on the modified JSON and provided secret.
- Validation Indicator: Visual status badges showing if the token signature is valid or if the JSON is malformed.
- Responsive UI: Split-screen layout on desktop, stacked layout on mobile.
UI Layout Specification
- Header: Simple, clean application title with a brief description and a "Clear" button to reset state.
- Main Tool Area:
- Left Column (Input): Contains the "Paste JWT" textarea, followed by two expandable sections for "Header Editor" and "Payload Editor".
- Right Column (Output): Contains the "Generated Token" display area, a "Validation Badge" (Success/Warning/Error), and the "Signing Configuration" section (Secret key input + Algorithm dropdown).
- Results Section: A read-only box with the final, signed JWT, featuring a "Copy to Clipboard" button with a visual "Copied!" micro-interaction.
Design System (Light Mode Only)
- Palette:
- Background:
#F9FAFB(Gray-50) - Surfaces:
#FFFFFF(White) with soft shadows (shadow-smandshadow-md). - Primary Color (Actions):
#2563EB(Blue-600). - Text:
#111827(Gray-900) for headers,#4B5563(Gray-600) for body text. - Success State:
#059669(Emerald-600). - Error State:
#DC2626(Red-600).
- Background:
- Typography: Sans-serif stack (Inter, system-ui, sans-serif).
- Animations:
- Subtle fade-in for updated results.
- Smooth button hover transitions (scale slightly, change background intensity).
- Non-intrusive focus rings on inputs.
Implementation Directives
- Use
jsrsasign(CDN) for all JWT encoding/decoding/signing operations. - Ensure the UI remains responsive; the output section should be sticky on large screens for easy access.
- The "Re-sign" operation must handle cases where the secret key is missing (show validation error in UI instead of blocking execution).
- All external links must have
target="_blank" rel="noopener noreferrer".
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Is this JWT modification tool secure to use?
Yes, this tool is designed for security and privacy by design. All token processing, decoding, and re-signing occur locally within your browser, ensuring that your JWT data and secret keys are never transmitted to a server or stored in a database. Because the operations are executed entirely on the client side, there is no risk of your authentication secrets being intercepted by third parties. We do not track usage, store logs, or save any input data.
Does this tool store my JSON Web Tokens?
No. This application strictly adheres to a 'stateless' design philosophy. We do not utilize cookies, local storage, session storage, or indexed databases to save your tokens or keys between sessions. Every time you refresh the browser page, the application state is completely reset. Once you close the tab or window, any data you entered is immediately wiped from the application's memory, guaranteeing complete privacy for your sensitive development tokens.
What algorithms are supported for re-signing tokens?
The tool supports standard signing algorithms including HS256 (HMAC with SHA-256) for symmetric keys. When you modify the header or payload, you can re-sign the token using your own secret key provided in the input field. This functionality allows developers to test how their applications react to different token claims, expiration times, or modified algorithm headers during the debugging and development phase of authentication implementation.
Can I use this for production environment tokens?
While technically possible, this tool is intended for debugging, educational, and development purposes only. Modifying production tokens can lead to unauthorized access attempts or authentication failures in your live services, and should be handled with caution. We recommend using this utility to inspect tokens from your development or staging environments to troubleshoot identity claims or test token expiration logic. Never share production private keys or secret keys in environments that you do not fully control.
