Technical Specification: SQL to Markdown Table Converter

Overview

A high-performance, single-file browser utility designed to transform raw database query results (TSV, CSV, or pasted table grids) into standardized Markdown table syntax.

Core Features

• Auto-Detection: Automatically parses column headers and data rows from pasted clipboard text.
• Live Preview: Renders the resulting Markdown table in a preview pane in real-time.
• Syntax Control: One-click toggles for column alignment (Left, Center, Right) and header formatting.
• Copy to Clipboard: Optimized "Copy Code" button with visual feedback (success icon).
• Bulk Processing: Ability to handle large datasets within browser memory limitations without freezing the UI.

UI/UX Design

• Layout:
  • Header: Clean, minimalist title with a short description.
  • Main Work Area: A split-pane layout (Side-by-side on desktop, vertical stack on mobile).
    • Left Pane: Large textarea for raw data input.
    • Right Pane: Dual-view output containing both the "Preview" table and the "Raw Markdown" code block.
  • Controls: A dedicated toolbar row with buttons for "Clear", "Copy Markdown", and "Settings".
• Aesthetics:
  • Palette: Crisp whites, soft light grays for UI elements, and a professional blue/slate color for active elements (primary buttons).
  • Typography: System-stack sans-serif for UI, monospace for input/output panes.
  • Transitions: Smooth fade-in effects for content updates and button interaction feedback.

Technical Implementation Directives

• Architecture: All logic, HTML, and CSS must reside in one file.
• Dependencies: Tailwind CSS via CDN for styling; no heavy frameworks (React/Vue/Angular).
• Performance: Use optimized regular expressions for parsing; handle text processing in a requestAnimationFrame loop if inputs are large to keep the UI responsive.
• Sandboxed Compatibility:
  • No Storage: No use of localStorage or cookies. Ensure the tool resets to defaults upon refresh.
  • No Popups: Replace alert() and confirm() with non-intrusive UI-based notification toasts or hidden-to-visible divs.
  • No External Dependencies: If icons are required, use SVG directly in the HTML or a CDN-based icon font via a single <link> tag.
• Security: Sanitize all output text to prevent injection risks if the Markdown is rendered as HTML in the preview pane (using textContent or DOM purification where applicable).

Development Workflow

1. Setup index.html with a clean, responsive viewport.
2. Implement input handler that listens for paste and input events on the text area.
3. Create the parser function: split input by newlines, detect headers based on the first row, construct the Markdown string, and generate the HTML table preview.
4. Apply Tailwind CSS classes to achieve a polished, SaaS-like look.
5. Ensure all interactions satisfy accessibility standards (aria-labels, sufficient contrast).