HTML to JSX Converter

Technical Specification

1. Overview

A client-side utility designed to bridge the gap between static HTML markup and dynamic React JSX code. This tool streamlines development by automating the tedious manual adjustments required to port HTML templates into React components.

2. Feature List

• Live Conversion Engine: Instant transformation of HTML strings to JSX format.
• Smart Attribute Mapping:
  • Automatically converts class to className.
  • Automatically converts for to htmlFor.
  • Handles SVG attribute camel-casing (e.g., stroke-width to strokeWidth).
• Style Processing: Converts string-based style="color: red; font-size: 16px;" into JavaScript style objects {color: 'red', fontSize: '16px'}.
• Self-Closing Tag Handling: Ensures tags like <img>, <input>, and <br> are properly formatted as <img />.
• User Controls:
  • Clear button to reset inputs.
  • Copy to Clipboard button with feedback animation.
  • Auto-formatting of the output code block for readability.

3. UI/UX Specification

• Design Aesthetic: Premium SaaS light-mode aesthetic. High-contrast, clean typography (Inter or system sans-serif), generous whitespace, and subtle shadows on interaction elements.
• Color Palette:
  • Background: #FFFFFF (Page), #F3F4F6 (Main container).
  • Primary Accent: #2563EB (Blue - for buttons and primary actions).
  • Text: #111827 (Heading), #374151 (Body).
  • Borders: #E5E7EB (Subtle gray lines).
• Layout:
  • Header: Simple tool title and tagline.
  • Input Section: A flexible textarea on the left (desktop) or top (mobile) for pasting raw HTML.
  • Output Section: A read-only code display area on the right (desktop) or bottom (mobile) with line numbering and syntax highlighting visuals.
  • Interaction Area: A sticky action bar containing primary 'Convert' and 'Copy' actions.

4. Technical Implementation Directives

• Architecture: Single HTML file containing all <style> and <script> logic.
• Dependencies: Tailwind CSS (via CDN) for styling. No heavy frameworks.
• Constraints:
  • NO Storage: Explicitly forbid localStorage, sessionStorage, or cookies. Use strictly volatile in-memory variables.
  • NO Popups: If user feedback is required (e.g., "Copied to clipboard"), use an animated custom toast notification overlay, not alert() or confirm().
  • Sandboxing: The app must function within a sandboxed iframe. All links must have target="_blank" and rel="noopener noreferrer".
  • Responsive Design: Mobile-first approach using Flexbox and Grid. The UI should gracefully transition from a vertical stack (mobile) to a dual-pane side-by-side view (desktop).
• Performance: Heavy logic should be contained in requestAnimationFrame or a simple debounce function to prevent blocking the main UI thread during paste operations.