What does the converter change?

It converts class to className, for to htmlFor, inline styles to JS objects, self-closing tags like to , and SVG attributes to camelCase.

Yes. SVG attributes like stroke-width become strokeWidth, fill-rule becomes fillRule, and other SVG-specific attributes are properly converted.

What does the converter change?

It converts class to className, for to htmlFor, inline styles to JS objects, self-closing tags like to , and SVG attributes to camelCase.

Yes. SVG attributes like stroke-width become strokeWidth, fill-rule becomes fillRule, and other SVG-specific attributes are properly converted.

Gratis

HTML till JSX-omvandlare

Klistra in HTML och få giltig React JSX. Hanterar className, stilobjekt, självslutninga taggar, SVG-attribut och händelsehanterare.

100% gratisIngen registrering krävsKörs i din webbläsare

Använd className

Självslutnande taggar

Ta bort kommentarer

Slå in i komponent

HTML

JSX (10 ändringar)

<div className="container">
  <h1 className="title">Hello World</h1>
  <img src="/photo.jpg" alt="Photo" />
  <br />
  <label htmlFor="email">Email</label>
  <input type="email" tabIndex="1" autofocus readonly />
  {/* A comment */}
  <button onClick={handleClick()} style={{{ color: 'red', fontSize: 14 }}}>
    Submit
  </button>
</div>

Om HTML to JSX Converter

Paste HTML and get valid React JSX output instantly. Automatically converts class to className, style strings to objects, self-closing tags, SVG attributes, and event handlers. Saves time when migrating HTML templates to React components.

Vanliga frågor

Fler Developer-verktyg

Regex Tester

Test regular expressions with live highlighting.

Write and test regular expressions with instant visual feedback. See matches highlighted in real time, view capture groups, and test against multiple strings. Supports JavaScript regex syntax with all common flags.

Tailwind Color Generator

Generate a full Tailwind color palette from one color.

Favicon Generator

Create favicons from custom text or initials.

Se alla verktyg

Bygger du en React-app? LaunchChats widget är en enda <script>-tagg – ingen JSX behövs.

Inget kreditkort krävs

Need an AI support chatbot?

LaunchChat turns your docs into a support widget with citations and auto-escalation. Lifetime deal available.

Try Free