Technical Specification: JSON Validator & Auto-Fixer

Overview

A high-performance, single-file browser utility designed to help developers and data analysts validate JSON syntax and perform basic repairs on malformed data. The tool provides instant feedback, syntax highlighting, and an automated "Fix" engine.

Core Features

• Live Syntax Validation: Instant feedback on JSON validity using a high-performance try/catch parsing engine.
• Auto-Fix Engine: A robust heuristic engine that attempts to repair common JSON pitfalls:
  • Removing trailing commas.
  • Adding missing closing braces/brackets.
  • Fixing unquoted keys or keys with single quotes.
  • Cleaning up extra whitespace.
• Beautifier: A "Pretty Print" function to standardize indentation (2-space or 4-space options).
• Copy-to-Clipboard: Single-click functionality to copy validated JSON.
• Error Localization: Detailed error messaging highlighting the approximate character position of syntax failures.

UI/UX Specification

• Layout:
  • Header: Clean, minimalist title with a short description.
  • Main Work Area: A side-by-side (on desktop) or stacked (on mobile) layout containing a large, monospaced textarea for input and a read-only area for output.
  • Action Bar: A row of buttons (Validate, Fix, Format, Clear, Copy) with distinct, clear labels.
  • Error Console: A dedicated area below the editor that dynamically displays errors or success notifications using color-coded alerts (Red for error, Green for success).
• Design Aesthetic:
  • Light Mode Only: Clean, professional white/off-white background (#f9fafb).
  • Typography: Sans-serif headers (Inter or system-ui) and monospaced code fonts for the editor.
  • Shadows: Soft, subtle drop shadows on input containers to create depth without visual clutter.
  • Transitions: All buttons must have smooth hover and active state transitions (0.2s duration).

Color Palette

• Primary Blue: #2563eb (Actions/CTA)
• Success Green: #16a34a (Validation success indicators)
• Danger Red: #dc2626 (Validation error indicators)
• Background: #ffffff
• Secondary Background: #f3f4f6
• Text: #1f2937 (Primary), #6b7280 (Muted)

Technical Constraints & Directives

• Architecture: The entire application must be contained in a single index.html file.
• No State Persistence: Do NOT use localStorage, cookies, or IndexedDB. State must be cleared upon refresh.
• Libraries: You may use CDN-hosted libraries like Prism.js (for syntax highlighting) and a standard CSS framework like Tailwind CSS (via CDN) to maintain the SaaS aesthetic.
• Responsiveness: Use CSS Flexbox/Grid for fluid layouts. The application must scale gracefully from 320px width to 1440px+.
• Sandboxed Environment: The app must function within a null-origin iframe (no popups, no external requests that trigger security blocks). All logic must be synchronous or local-only asynchronous.