HTML to JSX

HTML Input

JSX Output

<div class="container" style="max-width: 960px; margin: 0 auto; padding: 20px;">
  <header class="hero" style="text-align: center; padding: 40px 0;">
    <h1 style="font-size: 2.5rem; color: #6c63ff;">Hello World</h1>
    <p class="subtitle" style="color: #888; font-size: 1.2rem;">
      Paste your HTML here and see it converted to JSX instantly.
    </p>
    <br>
    <a href="https://react.dev" class="btn" onclick="handleClick()">
      Get Started
    </a>
  </header>

<main>
    <section class="features">
      <h2>Features</h2>
      <ul>
        <li>Converts <strong>class</strong> to <strong>className</strong></li>
        <li>Converts <strong>for</strong> to <strong>htmlFor</strong></li>
        <li>Transforms inline styles to JSX objects</li>
        <li>Handles self-closing tags like <img src="/logo.png" alt="Logo"></li>
      </ul>
    </section>

<section class="form-section">
      <h2>Contact Form</h2>
      <form>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="you@example.com" readonly>
        <label for="message">Message</label>
        <textarea id="message" rows="4" maxlength="500"></textarea>
        <button type="submit" class="submit-btn" disabled>Send</button>
      </form>
    </section>
  </main>

// Error: Could not parse the provided HTML.