Product Specification: Browser-Based XML to CSV Converter

Overview

A high-performance, single-file utility that parses hierarchical XML structures into flattened, tabular CSV data ready for Microsoft Excel, Google Sheets, or other data analysis software.

Core Features

• Live Parsing Engine: Real-time conversion as the user interacts with the input.
• Heuristic Path Flattening: Automatically detects node paths (e.g., user/profile/name) to create header columns for nested data.
• Column Selector: A dynamic checkbox interface allowing users to choose exactly which fields to include in the final CSV.
• Custom Delimiter Support: Users can choose between comma, tab, semicolon, or custom characters for the CSV output.
• In-Browser File Handling: Support for .xml file uploads using the File API without server-side processing.
• One-Click Export: Trigger a generated Blob download for the resulting CSV file.

UI Layout

• Header: A clean, modern title "XML to CSV Converter" with a brief instructional subtitle.
• Main Tool Area: A split-screen layout (on desktop) or stacked layout (on mobile):
  • Left/Top Panel: Text area for XML input and a secondary drag-and-drop file zone.
  • Settings Panel: Controls for delimiter selection and a "Flattening Depth" slider.
  • Results/Preview Panel: A scrollable table preview showing the first 10 rows of the conversion.
• Action Bar: A "Download CSV" button and a "Clear" button positioned at the bottom of the main tool area.

Design & Aesthetics

• Theme: Strict light mode. Use a professional color palette: bg-slate-50 background, white content containers, text-slate-900 for headings, and blue-600 for primary action buttons.
• Typography: Sans-serif (e.g., Inter or system fonts) with optimized legibility.
• Animations:
  • Subtle fade-in for the preview table when data is successfully parsed.
  • Smooth transition on the download button from greyed-out (disabled) to blue (enabled).
  • Micro-interactions on buttons (slight scale up on hover, background tint change on active).

Technical Directives (CRITICAL)

• Sandboxed Environment: The app is strictly for a sandboxed iframe. Do not attempt to use localStorage, sessionStorage, or cookies. Keep all state in global or closure-scoped JS variables.
• Single File: Package all CSS, HTML, and vanilla JavaScript into one file. Use Tailwind CSS via CDN for rapid styling.
• Performance: Use DOMParser for XML parsing. Handle large files by using requestAnimationFrame or setTimeout chunks to prevent browser UI freezing.
• No Dependencies: Use vanilla JS DOM manipulation. If a library is needed, it must be loaded via CDN (e.g., a lightweight CSV generation helper).