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.

Gratuito

Convertitore HTML a JSX

Incolla HTML e ottieni JSX React valido. Gestisce className, oggetti di stile, tag autochiudenti, attributi SVG e gestori di eventi.

100% gratuitoNessuna iscrizione richiestaFunziona nel tuo browser

Usa className

Tag autochiudenti

Rimuovi commenti

Avvolgi in componente

HTML

JSX (10 modifiche)

<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>

About 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.

Domande frequenti

Altri strumenti Developer

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.

Visualizza tutti gli strumenti

Stai costruendo un'app React? Il widget di LaunchChat è un singolo tag <script> — nessun JSX necessario.

Nessuna carta di credito richiesta

Need an AI support chatbot?

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

Try Free