Markdown Table to CSV Converter

Overview

A high-performance, browser-based tool designed to extract structured data from Markdown table syntax and convert it into a standardized CSV (Comma Separated Values) format. This utility is essential for data analysts, technical writers, and developers who need to move data from documentation (READMEs) into spreadsheets.

Core Features

• Live Parsing: The application parses Markdown tables as the user types or pastes text.
• Customizable Delimiters: Options to toggle between Comma, Semicolon, and Tab-separated outputs.
• Error Feedback: Real-time validation to notify users if the Markdown syntax is malformed or invalid.
• One-Click Download: Generate and download a .csv file directly to the local machine.
• One-Click Copy: Quickly copy the raw CSV output to the system clipboard.
• Responsive Design: Optimized for seamless usage on desktop, tablet, and mobile devices.

User Interface (UI) Layout

• Header: Clean, centered title with a brief descriptive subtitle.
• Main Tool Area: A vertical split layout (stacked on mobile) containing:
  • Input Panel: A large, resizable textarea for Markdown input with a placeholder prompt.
  • Output Panel: A high-contrast pre-formatted box showing the generated CSV preview.
• Action Bar: Placed between panels, featuring prominent buttons for "Download CSV" and "Copy to Clipboard".
• Config Panel: A horizontal row of radio buttons for delimiter selection.

Visual Design & Aesthetics (Light Mode Only)

• Palette:
  • Background: Off-white (#F9FAFB)
  • Primary Accent: Professional Blue (#2563EB)
  • Text: Dark Charcoal (#1F2937)
  • Border/Input fields: Light Grey (#E5E7EB)
• Typography: Sans-serif stack (Inter or System-ui) for high readability.
• Animations: Subtle fade-in effects for conversion results and click-states for buttons using standard CSS transitions (transition: all 0.2s ease).

Developer Guidelines (Mandatory)

• Architecture: Must be a single, standalone HTML file containing all necessary CSS and JS.
• Environment: Must run in a sandboxed iframe. Do NOT use localStorage, sessionStorage, or cookies.
• Security: Do not use eval() or dangerous DOM injection. Use textContent for data updates.
• Styling: Use Tailwind CSS via CDN for rapid, consistent layout development.
• Responsiveness: Ensure that the input/output areas stack vertically on screens smaller than 768px.
• No Branding: Ensure no fictional logos, names, or brand markers are included in the UI.