Technical Specification: JSON to HTML Table Converter & Visualizer

Overview

This single-file web application serves as a high-utility, developer-focused tool to convert raw JSON strings into interactive, visually appealing HTML tables. The application focuses on data clarity, ease of use, and instant feedback without server-side processing.

Core Features

• Live JSON Parsing: Real-time conversion as the user types or pastes JSON content.
• Smart Flattening: Automatically detects and flattens nested JSON objects to prevent complex, unreadable cell content.
• Interactive Grid: Includes sorting by column, search filtering, and pagination for large datasets.
• Data Export: Buttons to download the data as a CSV file or copy the raw HTML code for integration into websites or documents.
• Validation Engine: Built-in JSON validator that highlights syntax errors in real-time to prevent broken output.

UI Layout

• Header: Minimalist navigation bar with the tool title and a link to "Clear Data".
• Main Interface (Split View):
  • Left Column (Input): A large, monospaced textarea for JSON input with line numbers and a validation status badge (green for valid, red for invalid).
  • Right/Bottom Section (Output): A clean, scrollable container displaying the generated table.
• Toolbar: Located above the table, containing "Download CSV", "Copy HTML", and "View Raw JSON" toggles.

Aesthetics & Design System

• Theme: Strictly Light Mode. Use a clean, professional aesthetic with a high-contrast white background (#FFFFFF) and subtle gray neutral tones (#F3F4F6).
• Typography: Sans-serif font stack (Inter or System UI) for readability. Monospaced font for the JSON input area.
• Transitions: Smooth fade-in animations for table rows when data is updated. Hover effects on table rows with subtle background color changes (e.g., #F9FAFB).
• Components: High-quality Tailwind-style inputs and buttons with rounded corners and consistent padding.

Developer Constraints & Requirements

• Architecture: Must be a single index.html file. Use <style> for CSS and <script> for logic.
• Dependencies: Use CDN links for tailwind.css and any necessary icons (e.g., Lucide or FontAwesome). No NPM build steps.
• Persistence: DO NOT USE localStorage or sessionStorage. All state (input text, filtered data) must be kept in JS memory variables. The app resets on refresh.
• Responsive: The layout must stack vertically on mobile (Input top, Output bottom) and side-by-side on desktop.
• Iframe Compatibility: All links must use target="_blank" rel="noopener noreferrer". Avoid alert(), confirm(), or prompt(); use custom HTML modals for interactions.
• Security: Ensure the JSON parsing is handled safely using JSON.parse with comprehensive error handling to prevent UI crashes.