⚛️ HTML to React (JS)

The most advanced and robust HTML to JSX converter for VS Code.
Instantly convert complex HTML, SVG, and CSS into clean, functional React components.

✨ Why this extension?

Unlike simple regex-based converters that break on complex code, this extension uses a smart parsing engine. It understands the structure of your HTML, ensuring that:

Text content remains untouched (e.g., <div>class</div> stays <div>class</div>).
Nested tags are handled perfectly.
Inline styles and SVGs are converted to valid React syntax automatically.

🚀 Features

🛡️ Smart Parsing: Safely converts attributes without breaking your text content.
🎨 Style Conversion: Automatically transforms inline CSS strings into React style objects.
- style="color: red; margin-top: 10px" ➡️ style={{ color: 'red', marginTop: '10px' }}
🖼️ SVG Support: Full support for SVG attributes.
- stroke-width ➡️ strokeWidth, fill-rule ➡️ fillRule
🔧 Attribute Fixing:
- class ➡️ className
- for ➡️ htmlFor
- onclick ➡️ onClick (and other events)
- checked, disabled, readonly ➡️ {true}
� Self-Closing Tags: Automatically closes void elements like <input>, <img>, <br> to make them valid JSX.
💬 Comments: Converts HTML comments  to JSX comments {/* */}.

� How to Use

Select any HTML code in your editor.
Right-click and choose "Convert to React Component".
Enter a name for your component (e.g., HeroSection).
Done! A new file is created with your functional React component.

💡 Examples

1. Complex Attributes & Styles

Input (HTML):

<div class="card" style="background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
  <label for="username">Username</label>
  <input type="text" name="username" disabled autofocus>
</div>

Output (JSX):

import React from 'react';

export default function Card(props) {
  return (
    <>
      <div className="card" style={{ backgroundColor: '#fff', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
        <label htmlFor="username">Username</label>
        <input type="text" name="username" disabled autoFocus />
      </div>
    </>
  );
}

2. SVG Icons

Input (HTML):

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 2L2 7l10 5 10-5-10-5z" stroke-linejoin="round"/>
</svg>

Output (JSX):

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
  <path d="M12 2L2 7l10 5 10-5-10-5z" strokeLinejoin="round" />
</svg>

👨‍💻 Author

Ganesh Wayal
GitHub | Marketplace

Enjoying the extension?
Please leave a review to help others find it! ⭐⭐⭐⭐⭐