Technical Specification: CSV to Markdown Table Converter

Overview

A high-performance, browser-based utility designed to instantly transform raw CSV data (or clipboard-pasted spreadsheets) into clean, properly formatted GitHub-flavored Markdown tables. The tool focuses on speed, privacy, and user experience.

Core Functionality

• Live Conversion Engine: Instant conversion as the user types or pastes data.
• Smart Delimiter Detection: Automatically detects commas, tabs, or semicolons.
• Configurable Alignment: Global and per-column text alignment settings (Left, Center, Right).
• Instant Copy: One-click functionality to copy the generated Markdown to the clipboard.
• File Export: Capability to download the result as a .md file.
• Client-Side Processing: Zero server interaction. 100% security for sensitive data.

UI/UX Design

• Aesthetic: Premium, minimalist "SaaS" aesthetic. Light mode exclusively. High-contrast typography, clean whitespace, and subtle shadows (box-shadow) for containers.
• Layout:
  • Header: Minimalist navigation bar with the tool title.
  • Split-Screen Input/Output:
    • Left: Multiline text area for raw CSV input.
    • Right: Real-time rendered preview of the Markdown table syntax.
  • Control Toolbar: Centered between sections, containing switches for alignment, clear buttons, and download triggers.
• Typography: Clean system-ui sans-serif fonts (Inter or system defaults) for maximum readability.

Development Directives

• Architecture: Single HTML file containing all logic, styles, and markup. Do not use frameworks (React/Vue/Angular).
• Styling: Use Tailwind CSS (via CDN) for responsive design, layout, and consistent spacing.
• Security: Must operate entirely in-memory. Strictly forbid the use of localStorage, sessionStorage, or Cookies. The tool must function perfectly within a sandboxed iframe.
• Responsiveness: The split-screen layout must collapse to a vertical stack (input on top, preview on bottom) on smaller screens (mobile/tablet).
• Performance: Use efficient string parsing logic to handle large CSV datasets without blocking the UI thread.
• Accessibility: All buttons must have proper aria-label attributes. High contrast ratios for all text.