Technical Specification: Free Online Excel & CSV to JSON Converter

1. Overview

A high-performance, browser-based utility that allows users to convert spreadsheet data (Excel or CSV) into JSON format. The tool must be lightweight, responsive, and perform all operations locally within the browser memory to ensure data privacy.

2. Core Features

• File Drag-and-Drop: Intuitive upload zone for .xlsx, .xls, and .csv files.
• Instant Parsing: Uses the SheetJS library to parse files locally.
• Output Customization:
  • Toggle between 'Compact' (minified) and 'Pretty' (indented) JSON output.
  • Toggle between raw data or 'Strict Mode' for type conversion (detecting numbers/booleans).
• Action Buttons:
  • 'Copy to Clipboard' with toast notification confirmation.
  • 'Download as .json File' for local saving.
• Preview Pane: Real-time syntax-highlighted display of the converted JSON.
• Error Handling: Graceful UI alerts for unsupported file formats or empty files.

3. UI/UX Specification

• Design Aesthetic: Professional, clean, light-mode interface.
• Color Palette:
  • Background: #FFFFFF
  • Surface/Cards: #F9FAFB
  • Primary Brand (Buttons): #2563EB (Bright Blue)
  • Text: #1F2937 (Deep Slate)
  • Border/Subtle: #E5E7EB
• Layout:
  • Header: Centered title and brief instructional text.
  • Upload Area: Large, dashed-border drop zone with clear visual feedback on hover.
  • Options Bar: Row of toggles and select inputs for JSON formatting preferences.
  • Output Section: Read-only textarea with line numbers, showing the generated JSON.

4. Technical Constraints & Implementation

• Single File Requirement: All HTML, CSS, and JS must reside in a single file. External resources (Tailwind, SheetJS) must be loaded via CDN.
• No Persistent Storage: Under no circumstances should localStorage, sessionStorage, or IndexedDB be used. All file data must remain in temporary memory (JavaScript variables).
• Sandbox Safety: The app must be fully functional within a null-origin iframe.
• Responsive Design: The layout must stack vertically on mobile (width < 768px) and use a side-by-side split layout on desktop for options and output.
• Performance: Use FileReader API for asynchronous file reading to keep the UI responsive during parsing.

5. Animations & Interactions

• Fade-in: Smooth entrance of output content once conversion completes (200ms opacity transition).
• Hover Effects: Scaling buttons (1.02x scale) and subtle shadow shifts on interactive elements.
• Loading State: A non-intrusive CSS spinner or progress bar displayed in the conversion zone during large file parsing.
• Micro-copy: Clear tooltips explaining the function of specific options like 'Strict Mode'.