ToolDeck

Convertidor HTML a JSX

Convierte HTML a JSX para React — class→className, estilos string→objetos

Prueba un ejemplo

Entrada HTML

Salida JSX

Se ejecuta localmente · Es seguro pegar secretos
La salida JSX aparecerá aquí…

¿Qué es la conversión de HTML a JSX?

La conversión de HTML a JSX es el proceso de transformar marcado HTML estándar en sintaxis JSX que los componentes de React pueden renderizar. JSX se parece al HTML pero sigue las convenciones de nomenclatura y las reglas de JavaScript. Atributos como class se convierten en className, for se convierte en htmlFor, y los estilos en línea como cadenas se reemplazan con objetos JavaScript. Estos cambios son necesarios porque JSX compila a llamadas React.createElement(), donde los nombres de atributo deben coincidir con los nombres de propiedad de la API del DOM en lugar de los nombres de atributo HTML.

La correspondencia entre atributos HTML y props JSX está definida por la documentación de elementos del DOM de React. React usa camelCase para atributos de varias palabras (tabindex se convierte en tabIndex, maxlength en maxLength) porque los identificadores de JavaScript no pueden contener guiones. Las etiquetas de cierre automático como <img>, <br> e <input> deben incluir una barra diagonal final en JSX (<img />) ya que JSX sigue las reglas XML donde cada etiqueta debe cerrarse explícitamente.

htmlToJsxContent.whatBody3

¿Por qué usar un conversor de HTML a JSX?

Renombrar atributos manualmente y reescribir cadenas de estilo en decenas de elementos HTML es lento y propenso a errores. Un conversor gestiona todas las transformaciones de una vez, permitiéndote pegar HTML de cualquier fuente y obtener JSX válido en segundos.

Conversión instantánea
Pega cualquier fragmento HTML y obtén la salida JSX de inmediato. El conversor gestiona class, for, style, manejadores de eventos, atributos booleanos y etiquetas de cierre automático en un solo paso.
🔒
Procesamiento con privacidad
Toda la conversión se ejecuta localmente en tu navegador. Tu HTML nunca abandona la página, por lo que puedes convertir con seguridad marcado que contenga código interno, endpoints de API o contenido sensible.
📋
Sin cuenta ni configuración
Abre la página y empieza a convertir. No se requiere inicio de sesión, no hay paquetes npm que instalar, ni pasos de compilación que configurar. Funciona en cualquier dispositivo con un navegador moderno.
🔧
Cobertura completa de atributos
Convierte todas las correspondencias estándar de atributos de HTML a JSX, incluyendo className, htmlFor, tabIndex, readOnly, autoComplete y más de 20 adicionales. También gestiona el renombrado de manejadores de eventos como onclick a onClick.

Casos de uso de HTML a JSX

Desarrollador frontend: migración de plantillas
Al trasladar una página HTML existente o un componente a un proyecto React, pega el marcado en el conversor en lugar de buscar manualmente atributos class y for en cientos de líneas.
Ingeniero backend: incrustación de emails HTML
Las plantillas de email se crean en HTML simple. Al renderizarlas dentro de un panel de administración React o un componente de vista previa, convierte el HTML a JSX válido para evitar errores de sintaxis con className y style.
DevOps: conversión de widgets de panel
Los paneles de monitorización suelen usar fragmentos HTML para widgets personalizados. Conviértelos a JSX al integrarlos en una plataforma de herramientas internas basada en React, como Retool o un panel de administración personalizado.
Ingeniero QA: reproducción de informes de errores
Cuando un informe de error incluye salida HTML sin procesar, conviértela a JSX para renderizarla rápidamente dentro de un entorno de pruebas React o una historia de Storybook para inspección visual y depuración.
Diseñador: creación de prototipos desde maquetas HTML
Herramientas de diseño como Figma exportan HTML y CSS. Convierte el marcado exportado a JSX para incorporarlo directamente en un prototipo React sin limpieza manual de atributos.
Estudiante: aprendizaje de la sintaxis de React
Compara la entrada HTML con la salida JSX en paralelo para entender qué atributos cambian y por qué. Ver la transformación hace que las convenciones de nomenclatura de React sean más fáciles de memorizar que leer la documentación por sí solo.

Referencia de correspondencia de atributos HTML a JSX

La tabla a continuación lista los atributos HTML que cambian al convertirse a JSX. Los atributos no listados aquí (id, src, href, alt, placeholder, etc.) permanecen sin cambios porque sus nombres HTML ya coinciden con los nombres de propiedad correspondientes de la API del DOM.

Atributo HTMLProp JSXNotas
classclassNameReserved word in JavaScript
forhtmlForReserved word in JavaScript
tabindextabIndexcamelCase convention
readonlyreadOnlycamelCase convention
maxlengthmaxLengthcamelCase convention
minlengthminLengthcamelCase convention
cellpaddingcellPaddingcamelCase convention
cellspacingcellSpacingcamelCase convention
rowspanrowSpancamelCase convention
colspancolSpancamelCase convention
enctypeencTypecamelCase convention
autocompleteautoCompletecamelCase convention
autofocusautoFocuscamelCase convention
autoplayautoPlaycamelCase convention
contenteditablecontentEditablecamelCase convention
crossorigincrossOrigincamelCase convention
novalidatenoValidatecamelCase convention
allowfullscreenallowFullScreencamelCase convention
spellcheckspellCheckcamelCase convention
http-equivhttpEquivHyphen removed, camelCase
onclickonClickEvent handler camelCase
onchangeonChangeEvent handler camelCase
onsubmitonSubmitEvent handler camelCase

Conversión de estilos en línea: HTML vs JSX

Los estilos en línea son la parte más propensa a errores de la conversión de HTML a JSX porque cambian tanto el formato del valor como los nombres de las propiedades:

Atributo style de HTML
Una cadena de declaraciones CSS separadas por punto y coma. Los nombres de propiedad usan kebab-case (background-color, font-size, border-radius). Los valores son siempre cadenas, incluidos los valores numéricos con unidades.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
Prop style de JSX
Un objeto JavaScript con nombres de propiedad en camelCase (backgroundColor, fontSize, borderRadius). Los valores de cadena van entre comillas. Los valores numéricos sin unidad (lineHeight, opacity, zIndex, flexGrow) pueden ser números simples.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Ejemplos de código

Estos ejemplos muestran cómo convertir HTML a JSX de forma programática en diferentes lenguajes y entornos. Cada uno cubre el renombrado de atributos, la conversión de estilos y el tratamiento de etiquetas de cierre automático.

JavaScript (DOM API)
// Simple attribute conversion using string replacement
function htmlToJsx(html) {
  return html
    .replace(/\bclass=/g, 'className=')
    .replace(/\bfor=/g, 'htmlFor=')
    .replace(/\btabindex=/g, 'tabIndex=')
    .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}

htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'
JavaScript (html-react-parser)
import parse from 'html-react-parser'

// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
//   React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))

// With custom element replacement
const options = {
  replace(domNode) {
    if (domNode.name === 'img') {
      return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
    }
  }
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)
Python (BeautifulSoup)
from bs4 import BeautifulSoup
import re

ATTR_MAP = {
    'class': 'className', 'for': 'htmlFor',
    'tabindex': 'tabIndex', 'readonly': 'readOnly',
    'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}

def html_to_jsx(html: str) -> str:
    """Convert HTML attribute names to JSX equivalents."""
    for html_attr, jsx_attr in ATTR_MAP.items():
        html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
    # Convert HTML comments to JSX comments
    html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
    return html

print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'
Go
package main

import (
    "fmt"
    "strings"
)

var attrMap = map[string]string{
    "class=":    "className=",
    "for=":      "htmlFor=",
    "tabindex=": "tabIndex=",
    "readonly":  "readOnly",
}

func htmlToJSX(html string) string {
    result := html
    for old, new := range attrMap {
        result = strings.ReplaceAll(result, old, new)
    }
    // Convert comments
    result = strings.ReplaceAll(result, "<!--", "{/*")
    result = strings.ReplaceAll(result, "-->", "*/}")
    return result
}

func main() {
    html := `<div class="wrapper"><input readonly tabindex="1"></div>`
    fmt.Println(htmlToJSX(html))
    // → <div className="wrapper"><input readOnly tabIndex="1"></div>
}

Preguntas frecuentes

¿Cuál es la diferencia entre HTML y JSX?
JSX es una extensión de sintaxis para JavaScript utilizada por React. Se parece al HTML pero compila a llamadas React.createElement(). Las principales diferencias son: class se convierte en className, for se convierte en htmlFor, los estilos en línea usan objetos JavaScript en lugar de cadenas CSS, y todas las etiquetas deben cerrarse explícitamente (incluidos los elementos vacíos como <img />). JSX también permite incrustar expresiones JavaScript dentro de llaves.
¿Por qué React usa className en lugar de class?
La palabra 'class' es una palabra reservada en JavaScript. Como JSX compila a llamadas de función JavaScript, usar 'class' como nombre de prop causaría un error de sintaxis. React eligió 'className' porque coincide con el nombre de propiedad de la API del DOM (element.className) que JavaScript ya usa para leer y establecer clases CSS en elementos del DOM.
¿Necesito convertir HTML a JSX manualmente?
No. Puedes usar un conversor online como esta herramienta, o automatizarlo con bibliotecas como htmltojsx (npm) o html-react-parser. Para migraciones a gran escala, herramientas como codemod o jscodeshift pueden transformar bases de código enteras. La conversión manual solo es práctica para fragmentos pequeños de pocas líneas.
¿Cómo se gestionan los estilos en línea en JSX?
En JSX, el atributo style acepta un objeto JavaScript, no una cadena CSS. Los nombres de propiedad usan camelCase (backgroundColor en lugar de background-color). Los valores son cadenas por defecto, pero ciertas propiedades numéricas como lineHeight, opacity y zIndex aceptan números simples sin unidades. Las llaves dobles en style={{ color: 'red' }} no son sintaxis especial: las llaves externas son una expresión JSX, y las internas son un objeto literal JavaScript.
¿Puedo usar comentarios HTML en JSX?
htmlToJsxContent.a5
¿Qué atributos HTML permanecen igual en JSX?
La mayoría de los atributos HTML conservan sus nombres originales en JSX. Ejemplos comunes incluyen id, src, href, alt, type, name, value, placeholder, disabled, hidden, y todos los atributos data-* y aria-*. Solo los atributos cuyo nombre HTML difiere del nombre de propiedad de la API del DOM necesitan cambiar: class a className, for a htmlFor, y atributos de varias palabras que pasan de minúsculas a camelCase.
¿Es dangerouslySetInnerHTML lo mismo que convertir HTML a JSX?
No. dangerouslySetInnerHTML omite el renderizado de React e inyecta HTML sin procesar directamente en el DOM, lo que expone a vulnerabilidades XSS. Convertir HTML a JSX produce elementos React reales que pasan por el DOM virtual de React y son seguros por defecto. Usa la conversión de HTML a JSX para marcado estático que controlas. Usa dangerouslySetInnerHTML solo cuando debas renderizar HTML de confianza de una fuente externa que no pueda convertirse a JSX.