HTML Table to JSON & CSV Converter

Overview

A high-performance, browser-native utility designed to help developers and data analysts parse raw HTML <table> elements into machine-readable JSON or CSV formats. By leveraging the browser's native DOM parser, the tool ensures speed, security, and privacy.

Core Features

• Live Parsing: Instant conversion as you paste HTML code.
• Multi-Format Export: Support for JSON (Pretty Printed) and CSV (Comma-Separated Values).
• Automatic Schema Detection: Automatically identifies headers and creates keys based on <th> elements.
• Clipboard Integration: One-click "Copy to Clipboard" functionality.
• Responsive Preview: A clean, read-only preview table generated from the parsed data.
• No-Save Processing: Fully ephemeral state. Refreshes wipe all data to ensure complete privacy.

UI/UX Specification

• Layout:
  • Header: Minimalist title and description.
  • Main Area: Split-screen design. Left side for raw HTML input (monospaced textarea). Right side for control and output display.
  • Output Section: A tabbed interface switching between JSON view and CSV preview.
  • Actions: Floating action buttons for "Download CSV", "Copy JSON", and "Clear".
• Palette:
  • Primary: #2563eb (Royal Blue) for buttons and primary actions.
  • Background: #f8fafc (Slate 50) for the application body.
  • Cards: #ffffff (White) with soft shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
  • Text: #1e293b (Slate 800) for high readability.
• Typography: Inter or system-sans-serif, clean, crisp, and high-contrast.

Technical Implementation Directives

• Architecture: Single-file HTML/CSS/JS. Use Tailwind CSS via CDN for styling.
• Parser: Use DOMParser to handle incoming HTML strings. Iterate through <tr> and <td>/<th> elements to build an array of objects.
• Sandboxing:
  • Strictly forbid localStorage or sessionStorage. All state must live in memory (let currentData = []).
  • No alerts/prompts. Use custom HTML/CSS modals for "Success" or "Error" notifications.
• CSV Logic: Implement a Blob based download helper function for text/csv mime types.
• Performance: Use requestAnimationFrame or debounce the input event listener for the textarea to ensure smooth typing performance on large HTML snippets.
• Responsiveness: Use Flexbox/Grid. Stacking layout on mobile, side-by-side on desktop viewports.

Development Constraints

• Zero-Dependency: Minimize heavy libraries. Use lightweight standard browser APIs.
• No Branding: Do not include any company names or personal branding.
• Browser-Safe: Ensure the tool operates within a null origin iframe context.