Technical Specification: Free Online JSON Diff Checker

Overview

A high-performance, browser-based tool designed to allow developers and data analysts to compare two JSON objects side-by-side. It will feature syntax validation, automated beautification, and color-coded visual difference highlighting.

Core Functionality

1. Dual Input Interface: Two separate textareas for raw JSON input.
2. Comparison Engine: Uses an efficient diffing algorithm (e.g., Myers diff or similar implementation) to compare parsed JSON objects.
3. Visual Highlights:
   • Green: Added properties/lines.
   • Red: Removed properties/lines.
   • Yellow: Modified values.
4. Syntax Validation: Real-time error detection for malformed JSON inputs with clear error messages displayed below the respective textarea.
5. Beautify/Minify: Buttons to auto-format both JSON inputs for easier reading.
6. Clear Functionality: A 'Reset' button to wipe inputs without page reloads.

UI/UX Design

• Layout:
  • Header: Simple, clean title and subtitle.
  • Main Area: Responsive two-column layout on desktop, stacking on mobile devices.
  • Controls: A central toolbar section between the inputs containing the 'Compare' action button.
• Aesthetic:
  • Color Palette: Off-white background (#FAFAFA), slate borders (#E2E8F0), primary action buttons in distinct blue (#2563EB), with subtle shadows (shadow-sm, shadow-md).
  • Typography: Monospaced font (e.g., 'Fira Code', 'Monaco', or 'Courier New') for JSON content; Sans-serif (Inter) for UI elements.
  • Interactions: Smooth transitions (0.2s ease-in-out) on button hovers and diff rendering animations.

Technical Directives

• Single File: All HTML, CSS, and Vanilla JS must exist within one HTML file. No external frameworks like React/Vue. Use CDNs for essential libs only (e.g., a lightweight diff library or syntax highlighter if needed).
• Sandboxed Environment:
  • No Storage: Absolutely no localStorage, sessionStorage, or cookies. Keep all state in JS variables.
  • No Popups: Use dynamic <div> overlays for modals (errors, confirmations).
• Responsive Design: Use CSS Grid/Flexbox to ensure the tool adapts from full-screen desktop viewing to constrained mobile viewports without horizontal overflow.
• Browser Security: All external links (if any) must include rel="noopener noreferrer" and target="_blank".