Conversor de HTML a JSX
Conversor gratuito de HTML a JSX online. Pega tu HTML y obtén al instante JSX limpio para React: className, htmlFor, estilos camelCase, etiquetas autocerradas y comentarios seguros, todo en tu navegador.
¿Qué hace el conversor de HTML a JSX?
Convierte marcado HTML normal en JSX que React puede renderizar. Pega tu HTML en el área de entrada y el JSX equivalente aparece en el panel de salida, actualizándose mientras escribes con un pequeño debounce.
¿Qué atributos se renombran?
class pasa a className, for a htmlFor, tabindex a tabIndex, y otros atributos con guiones como maxlength, colspan o stroke-width se convierten a su nombre camelCase de React. Los atributos data-* y aria-* se mantienen intactos.
¿Cómo se convierte el atributo style?
Una cadena CSS como style="background-color: red; font-size: 12px" se convierte en un objeto JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, con cada propiedad CSS en formato camelCase y el valor entre comillas.
¿Cómo se tratan los elementos vacíos?
Los elementos que no pueden tener hijos —img, br, input, hr, meta, link y demás— se normalizan a sintaxis autocerrada: <img> pasa a <img />, tal como exige JSX. Los div y span vacíos también se cierran igual.
¿Qué ocurre con los comentarios HTML?
Se transforman en comentarios JSX: <!-- nota --> se convierte en {/* nota */}. Cualquier secuencia que cerraría el comentario antes de tiempo se neutraliza para que el código generado siempre compile.
¿Cómo se tratan las entidades y caracteres especiales?
Entidades como & o © se decodifican a caracteres reales y luego llaves y ángulos se re-escapan en forma segura para JSX, así el texto con { } o < se renderiza bien sin romper el componente.
¿Para qué sirve la opción de componente de función?
Envuelve el marcado convertido en una plantilla lista para usar: function Component() { return ( ...tu JSX... ) } en lugar de JSX suelto. Actívala para pegar el fragmento directamente en un archivo de React.
¿Mi HTML se sube a algún sitio?
No. El análisis ocurre por completo en tu navegador con el DOMParser integrado. No se envía nada a ningún servidor, así que puedes convertir marcado privado y también funciona sin conexión.
Cómo usar Conversor de HTML a JSX
Convierte HTML normal en JSX de React listo para usar sin salir del navegador. Todo se analiza localmente con el DOMParser integrado: tu marcado nunca se sube.
- Pega tu HTML en el editor de la izquierda; el resultado JSX aparece a la derecha y se actualiza mientras escribes (antirrebote de 300 ms).
- Elige el ancho de sangría en "Sangría" — 2 o 4 espacios por nivel de anidamiento.
- Activa "Componente de función" para envolver la salida en function Component() { return ( ... ) }, lista para pegar en un archivo de React.
- Usa Copiar para llevarte el resultado, Ejemplo para cargar una muestra, o Limpiar para empezar de nuevo.
class, for y tabindex se convierten en className, htmlFor y tabIndex, las cadenas de style pasan a objetos camelCase y los elementos vacíos como img o br se emiten auto-cerrados: exactamente lo que espera JSX.
Herramientas relacionadas
- Embellecedor HTML Formatea y embellece código HTML al instante. Convierte HTML minificado en código limpio y legible con indentación. Herramienta gratuita online.
- Código a Imagen Convierte fragmentos de código en imágenes compartibles con resaltado de sintaxis, temas personalizados y decoraciones de ventana. 100% privacidad, todo en tu navegador.
- Verificador de Hash Calcule y verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Visor Hexadecimal Vea el contenido de archivos en formato hexadecimal con búsqueda, navegación por desplazamiento y desplazamiento virtual
- Consulta de Tipos MIME Encuentra tipos MIME por extensión de archivo o busca extensiones por tipo MIME. Referencia en línea gratuita con más de 1000 entradas.
- Verificador de resolución de pantalla Detecta resolución de pantalla, tamaño de viewport, DPI y profundidad de color en tiempo real.