Saltar al contenido
AZ Tools

Conversor HTML → JSX

Conversor hecho a mano que reescribe las tareas aburridas de portar HTML a un componente React: renombrar atributos (`class`, `for`, `tabindex`, etc.), capitalizar handlers de eventos inline (`onclick → onClick`), auto-cerrar tags void (`<br>` → `<br />`), comentarios HTML a comentarios JSX, y conversión opcional de `style="color: red; font-size: 14px"` a un objeto literal `style={{ color: 'red', fontSize: '14px' }}`.

—
JSX
<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

Los valores de atributo string entre comillas quedan como strings; si necesitas una expresión JS, cámbiala en el JSX tras copiar.

Cómo usar

  1. Pega un snippet HTML.
  2. Conmuta la opción wrap-in-fragment si quieres una sola raíz para un componente React.
  3. Copia el JSX al archivo de tu componente.

Preguntas frecuentes

¿Qué atributos se renombran?
Todos los que React renombra: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, más cada handler de evento `on…`. Los atributos `aria-` y `data-` quedan en kebab-case.
¿Y si mi estilo inline tiene variables CSS?
Las propiedades que empiezan con `--` se citan como claves string (`'--accent': 'blue'`) así sobreviven al JSX. Las propiedades con prefijo de vendor como `-webkit-…` también se citan.
¿Ejecuta mi JavaScript o evalúa scripts?
No. El parser es un pequeño scanner hecho a mano — los tags `<script>` pasan como texto igual que cualquier otro elemento. La conversión es puramente a nivel de string.

Herramientas relacionadas

Conversor de CSS a objeto de estilo JS

Convierte un bloque de declaraciones CSS en un objeto de estilo en línea de React/JS, en tu navegador.

Desarrollo 0 0

Conversor de JSON a data class de Kotlin

Convierte un objeto JSON en data classes de Kotlin con propiedades tipadas, en tu navegador.

Desarrollo 0 0

Conversor de JSON a clase C#

Convierte un objeto JSON en clases C# con mapeo de tipos en autopropiedades, en tu navegador.

Desarrollo 0 0

Conversor de JSON a clase Java (POJO)

Convierte un objeto JSON en clases POJO de Java con campos tipados, en tu navegador.

Desarrollo 0 0

Generador de EditorConfig

Crea un archivo .editorconfig con estilo de sangría, fin de línea, charset y overrides comunes, en tu navegador.

Desarrollo 0 0

Codificador / Decodificador de Entidades HTML

Escapa caracteres especiales (& < > " ') o decodifica entidades a sus caracteres originales.

Desarrollo 0 0