Free Online JSON Minifier and Obfuscator Tool

This application is a professional-grade, browser-based utility designed for developers to compress and secure JSON data payloads. By removing whitespace and shortening key names, users can significantly reduce JSON file sizes for optimal API transmission.

Technical Specification

Core Functionality

• Live JSON Validation: As the user types or pastes, the app instantly checks for valid JSON syntax. Displays a clear error message with line/character location if the JSON is invalid.
• Minification Engine: A robust function that strips all whitespace, newlines, and indentation.
• Obfuscation Engine: A structural transformation utility that maps object keys to shorter character strings (e.g., 'userName' -> 'a', 'email' -> 'b') while maintaining the nested structure.
• Clipboard Utility: One-click copy for minified/obfuscated results.
• Export Utility: A 'Download as .json' feature to save results directly to the local filesystem.

User Interface Layout

• Header: Clean, centered title with a single-line descriptive subtitle.
• Main Interface:
  • Split-pane Input/Output: On desktop, a two-column view with an input box on the left and an output box on the right. On mobile, these stack vertically.
  • Controls Toolbar: A floating or sticky toolbar between the input and output areas containing action buttons: 'Minify', 'Obfuscate', 'Copy to Clipboard', 'Download', and 'Clear'.
  • Status Indicators: A small UI element indicating success or validation error status.
• Responsive Design: Fluid layout with percentage-based widths or CSS Grid, ensuring 100% usability on mobile devices, tablets, and desktops.

Aesthetics & Styling

• Palette: A professional light-mode theme utilizing:
  • Background: #f9fafb (Cool gray)
  • Text: #111827 (Charcoal)
  • Primary Action: #2563eb (Vibrant blue)
  • Secondary Actions/Borders: #d1d5db (Gray)
• Transitions: Smooth CSS ease-in-out transitions for button hover states (300ms) and modal appearances.
• Typography: System-stack sans-serif font (e.g., Inter, system-ui) for high readability.

Mandatory Developer Directives

1. Zero Persistence: DO NOT use localStorage, sessionStorage, or cookies. The tool must be stateless.
2. Client-Side Only: No backend integration. All operations must run via vanilla JavaScript inside the user's browser.
3. Iframe Compatibility: The app must be fully functional inside a sandboxed iframe. Avoid prompt(), alert(), or confirm(); use custom HTML-based modals instead.
4. Security: Use target="_blank" rel="noopener noreferrer" for all external links.
5. Architecture: Everything must be contained in a single HTML file (CSS in <style>, JS in <script>).