⚛️ HTML to React Advance

The most powerful and feature-rich HTML to JSX converter for VS Code.
Instantly convert complex HTML, SVG, and CSS into clean, production-ready React components with specialized support for state and TypeScript.

🚀 Advanced Features (The "Advance" Edition)

This isn't just a simple tag converter. This "Advance" edition includes:

🖥️ Advanced UI Panel: A dedicated side-by-side workspace for real-time conversion and experimentation.
🏗️ Automatic State Generation: Scans your HTML for forms/inputs and automatically generates useState hooks and change handlers.
📘 TypeScript First: Toggle between JS and TS with a single click. Generates full prop interfaces for your components.
⚡ Real-time Preview: See your JSX update instantly as you paste or type HTML.

✨ Why this extension?

Most simple converters use brittle regex that fails on complex HTML or breaks your text content. This extension uses a smart parsing engine designed for modern web development.

🛡️ Smart Parsing

Preserves Content: Text content remains untouched (e.g., <div>class</div> stays <div>class</div>).
Nested Structures: Perfectly handles deeply nested tags and complex layouts.
Escape Logic: Automatically escapes curly braces {} and other JSX-restricted characters in text content.

🎨 Premium Capabilities

Style Magic: Automatically transforms inline CSS into React-ready style objects.
Form Intelligence: Converts value ➡️ defaultValue, checked ➡️ defaultChecked, and class ➡️ className.
Full SVG Support: Full camelCase conversion for all SVG and ARIA attributes.
Clipboard/File Workflow: Copy directly to clipboard or save as a new .jsx/.tsx file.

🛠️ Key Features

Feature	Description
Advanced UI	New dedicated Webview for real-time preview, TypeScript options, and state generation (Command: `HTML to React: Advanced UI`).
State Detection	Automatically detects `input`, `textarea`, and `select` to create `useState` logic.
TS Interfaces	Generates `interface MyComponentProps` automatically when TypeScript is enabled.
Smart Attributes	`class` ➡️ `className`, `for` ➡️ `htmlFor`, and camelCase for events like `onclick`.
SVG Power	Seamlessly converts `stroke-width`, `fill-rule`, and 100+ other SVG attributes.
Boolean Logic	Handles `checked`, `disabled`, `readonly` correctly for JSX.
Void Tags	Automatically closes `<br>`, `<img/>`, `<input/>`, etc.
Comments	`<!-- -->` ➡️ `{/* */}` translation.
Customizable	Choose between Arrow Functions and Function Declarations.

📖 How to Use

Select any HTML/SVG code in your editor.
Right-click and choose "Create to JSX" (or use Cmd+Alt+R / Ctrl+Alt+R).
Enter a name for your component (e.g., Navbar).
Choose: Save to a new file or Copy to Clipboard.

💡 Examples

1. Complex Form Elements

Input:

<div class="form-group">
  <input type="text" value="Hello" class="input" style="color: blue;" disabled>
  <label for="id">Label</label>
</div>

Output:

import React from 'react';

const Navbar = (props) => {
  return (
    <>
      <div className="form-group">
        <input type="text" defaultValue="Hello" className="input" style={{ color: 'blue' }} disabled />
        <label htmlFor="id">Label</label>
      </div>
    </>
  );
};

export default Navbar;

2. SVG Icons

Input:

<svg stroke-width="2" fill-rule="evenodd">
  <circle cx="12" cy="12" r="10" />
</svg>

Output:

<svg strokeWidth="2" fillRule="evenodd">
  <circle cx="12" cy="12" r="10" />
</svg>

⚙️ Configuration

You can customize the extension behavior in your settings.json:

htmlToReact.componentType: "Arrow Function" (default) or "Function Declaration"
htmlToReact.fileExtension: ".jsx" (default) or ".tsx"
htmlToReact.defaultDirectory: Target folder (e.g., "src/components")
htmlToReact.autoFormat: Automatically format the file after creation (Prettier recommended)

👨‍💻 Author

Ganesh Wayal
GitHub | Marketplace

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