Technical Specification: Universal Data Format Converter

Overview

This is a high-performance, browser-based utility designed for developers and system administrators to convert between YAML and JSON formats seamlessly. The tool prioritizes speed, privacy, and ease of use, operating entirely on the client-side without external dependencies for processing.

Core Feature Set

• Bidirectional Conversion: Instant switching between YAML and JSON input modes.
• Real-Time Processing: Debounced input listeners to update output automatically as the user types.
• Error Highlighting: In-line error detection with human-readable messages when input syntax is invalid.
• Clipboard Operations: One-click "Copy to Clipboard" functionality for the output field.
• Formatting Controls: Options to adjust JSON indentation (2-space, 4-space, tab) and YAML indentation levels.
• Download Result: Capability to download the converted output as a .json or .yaml file.
• Zero-Persistence Policy: Strictly in-memory handling; no localStorage, sessionStorage, or cookies are utilized.

UI/UX Design Specification

• Layout: A clean, split-pane interface. On desktop, left column for input, right column for output. On mobile, a vertical stack with a toggle switch to swap between input/output view.
• Aesthetic: Minimalist SaaS aesthetic using a "clean light" palette.
• Primary Palette:
  • Background: #F8FAFC (Slate 50)
  • Primary: #2563EB (Blue 600)
  • Secondary/Border: #E2E8F0 (Slate 200)
  • Text: #1E293B (Slate 800)
  • Error/Warning: #DC2626 (Red 600)
• Animations: Subtle CSS transitions for button hover states (150ms ease-in-out) and fade-in effects when the conversion result appears.

Implementation Requirements

• Architecture: Single HTML file containing all HTML, CSS, and JS.
• External Assets:
  • Use a CDN (e.g., cdnjs) to load js-yaml for parsing.
  • Use Google Fonts (Inter) for typography.
• Development Guidelines:
  • NO Persistence: Avoid all browser-based storage APIs to ensure sandbox compatibility.
  • Accessibility: Use semantic HTML tags (<main>, <section>, <textarea>). Ensure proper ARIA labels for buttons and text areas.
  • Responsiveness: Use CSS Flexbox/Grid for layout shifts. Maintain minimum 16px touch targets for mobile users.
  • Error Handling: Wrap parsing logic in try-catch blocks. If parsing fails, display a clear, non-intrusive error alert inside the UI container (do not use alert() window).

Developer Instructions

1. Use a standard textarea for inputs to allow native text editing capabilities.
2. Implement a "Copy" button that toggles its state (e.g., change icon to checkmark) for 2 seconds after interaction.
3. Ensure the editor handles large text blocks efficiently by minimizing DOM re-paints.
4. All external links (if any) must include rel="noopener noreferrer".