HTML to JSX Converter

Convert standard HTML markup into valid React JSX / TSX code. Automatically converts `class` to `className`, `for` to `htmlFor`, inline `style="..."` strings into JS objects, and self-closes tags.

Why Use This Converter?

• React Development: Copy HTML templates or SVG snippets directly into React / Next.js components without manual attribute editing.
• Inline Style Conversion: Automatically transform HTML style strings (`style="margin-top: 10px; background-color: red"`) into React JS objects (`style={{ marginTop: "10px", backgroundColor: "red" }}`).
• SVG to React: Convert SVG icon markup into JSX components.

How to Use

1. Paste raw HTML code into the input panel.
2. The tool transforms attributes and tags into valid JSX instantly.
3. Copy the clean JSX code for your React component.

Real Conversion Example

Input (TEXT):

<div class="card" style="margin-top: 10px;">
  <img src="pic.jpg" alt="Photo">
  <label for="input1">Name</label>
</div>

Output (TEXT):

<div className="card" style={{ marginTop: "10px" }}>
  <img src="pic.jpg" alt="Photo" />
  <label htmlFor="input1">Name</label>
</div>

Important Technical Details & Mechanics

• Attribute Renaming: Replaces `class` -> `className`, `for` -> `htmlFor`, `tabindex` -> `tabIndex`, `autocomplete` -> `autoComplete`, etc.
• Inline Style Parser: Converts camelCase CSS property names and values into React style objects.
• Self-Closing Tag Enforcer: Automatically self-closes void tags (<img />, <input />, <br />, <hr />, <path />).

Related Developer & Utility Tools

• JSON Formatter: Format and validate JSON data.
• Text Statistics: Analyze character and word counts.
• URL Encoder: Encode and decode URL parameters.