What conversions does this tool perform?

It converts class to className, for to htmlFor, inline style strings to JSX style objects, HTML comments to JSX comments, self-closing tags (img, br, input, hr), boolean attributes, event handlers to camelCase, and many more HTML-specific attributes.

Does it handle inline styles correctly?

Yes. CSS style strings like style="background-color: red; padding: 20px" are converted to JSX objects like style={{ backgroundColor: 'red', padding: 20 }}. Numeric px values are converted to numbers.

Will it work with complex HTML?

The converter handles most standard HTML patterns. For very complex or malformed HTML with nested templates or framework-specific syntax, some manual adjustments may be needed. Always review the output before using in production.

HTML to JSX Converter

Convert HTML to JSX for React. Transforms attributes, styles, comments, and self-closing tags.

Share:𝕏 f in ↗

✓ class → className✓ for → htmlFor✓ style string → style object✓ HTML comments → JSX comments✓ Self-closing tags fixed✓ Boolean attributes cleaned✓ Event handlers camelCased✓ HTML attributes → JSX attributes

HTML Input

JSX Output

<div className="container">
  <label htmlFor="name">Name:</label>
  <input type="text" id="name" className="form-control" readOnly tabIndex="1" autoFocus />
  <img src="avatar.png" className="avatar" />
  <br />
  <hr />
  <div style={{{ backgroundColor: '#f0f0f0', padding: 20, marginTop: 10 }}}>
    <p className="text" contentEditable="true">Hello World</p>
    <button className="btn" disabled onClick="handleClick()">Submit</button>
  </div>
  {/* This is a comment */}
  <select className="select" multiple>
    <option value="1" selected>One</option>
  </select>
</div>

Conversions Applied

class="..."→className="..."

for="..."→htmlFor="..."

style="color: red"→style={{ color: 'red' }}

tabindex="1"→tabIndex="1"

→{/* comment */}

<img src="...">→<img src="..." />

<br>→<br />

<input ...>→<input ... />

disabled="disabled"→disabled

onclick="..."→onClick="..."

readonly→readOnly

contenteditable→contentEditable

Frequently Asked Questions

Related Tools

⚛️

SVG to React Component

Convert SVG code to React JSX components. Auto-renames attributes (stroke-width to strokeWidth), converts inline styles, supports TypeScript, memo, and forwardRef.

{ }

JSON Formatter

Format, validate, and minify JSON data with syntax highlighting.

🔄

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 strings back to plain text.

🔍

Regex Tester

Test and debug regular expressions in real-time. Matches highlighted, capture groups, replacements.

📊

CSV to JSON Converter

Convert CSV data to JSON arrays and JSON arrays back to CSV. Custom delimiters supported.

🔀

Text Diff Checker

Compare two texts and see additions, removals, and unchanged lines highlighted side by side.