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

Convertidor de HTML a JSX

Pega HTML y obtén JSX de React válido. Maneja className, objetos de estilo, etiquetas de autocierre, atributos SVG y controladores de eventos.

100% GratisSin Registro RequeridoSe Ejecuta en Tu Navegador

Usar className

Autocierre de etiquetas

Eliminar comentarios

Envolver en componente

HTML

JSX (10 cambios)

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

Acerca de 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.

Preguntas Frecuentes

Más Herramientas de 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.

Ver Todas las Herramientas

¿Construyendo una app de React? El widget de LaunchChat es una única etiqueta <script> — no se necesita JSX.

Sin tarjeta de crédito requerida

Need an AI support chatbot?

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

Try Free