ToolDeck

Conversor HTML para JSX

Converta HTML em JSX para React — class→className, strings de estilo→objetos

Experimente um exemplo

Entrada HTML

Saída JSX

Roda localmente · Seguro para colar segredos
A saída JSX aparecerá aqui…

O que é a conversão de HTML para JSX?

A conversão de HTML para JSX é o processo de transformar marcação HTML padrão em sintaxe JSX que os componentes React podem renderizar. JSX é semelhante ao HTML, mas segue as convenções e regras de nomenclatura do JavaScript. Atributos como class se tornam className, for se torna htmlFor, e strings de estilo inline são substituídas por objetos JavaScript. Essas mudanças são necessárias porque JSX compila para chamadas React.createElement(), onde os nomes dos atributos devem corresponder aos nomes de propriedade da API do DOM, e não aos nomes de atributos HTML.

O mapeamento entre atributos HTML e props JSX é definido pela documentação de elementos DOM do React. O React usa camelCase para atributos compostos (tabindex vira tabIndex, maxlength vira maxLength) porque identificadores JavaScript não podem conter hifens. Tags de fechamento automático como <img>, <br> e <input> precisam incluir uma barra no final em JSX (<img />) pois JSX segue as regras XML, onde toda tag deve ser fechada explicitamente.

htmlToJsxContent.whatBody3

Por que usar um conversor de HTML para JSX?

Renomear atributos manualmente e reescrever strings de estilo em dezenas de elementos HTML é lento e sujeito a erros. Um conversor aplica todas as transformações de uma vez, permitindo que você cole HTML de qualquer fonte e obtenha JSX válido em segundos.

Conversão instantânea
Cole qualquer trecho HTML e obtenha a saída JSX imediatamente. O conversor trata class, for, style, manipuladores de evento, atributos booleanos e tags de fechamento automático em uma única passagem.
🔒
Processamento com privacidade
Toda a conversão é executada localmente no seu navegador. Seu HTML nunca sai da página, então você pode converter com segurança marcação contendo código interno, endpoints de API ou conteúdo sensível.
📋
Sem conta nem configuração
Abra a página e comece a converter. Nenhum login necessário, nenhum pacote npm para instalar, nenhuma etapa de build para configurar. Funciona em qualquer dispositivo com um navegador moderno.
🔧
Cobertura completa de atributos
Converte todos os mapeamentos padrão de atributos HTML para JSX, incluindo className, htmlFor, tabIndex, readOnly, autoComplete e mais de 20 outros. Também trata a renomeação de manipuladores de evento como onclick para onClick.

Casos de uso do conversor HTML para JSX

Desenvolvedor frontend: migrando templates
Ao mover uma página ou componente HTML existente para um projeto React, cole a marcação no conversor em vez de procurar manualmente atributos class e for em centenas de linhas.
Engenheiro backend: incorporando e-mails HTML
Templates de e-mail são criados em HTML puro. Ao renderizá-los dentro de um painel administrativo React ou componente de preview, converta o HTML para JSX válido para evitar erros de sintaxe em className e style.
DevOps: convertendo widgets de dashboard
Dashboards de monitoramento frequentemente usam trechos HTML para widgets personalizados. Converta-os para JSX ao integrá-los em uma plataforma de ferramentas internas baseada em React, como Retool ou um painel administrativo personalizado.
QA: reproduzindo relatórios de bug
Quando um relatório de bug inclui saída HTML bruta, converta-a para JSX para renderizá-la rapidamente dentro de um harness de testes React ou story do Storybook para inspeção visual e depuração.
Designer: prototipando a partir de mockups HTML
Ferramentas de design como o Figma exportam HTML/CSS. Converta a marcação exportada para JSX para inserí-la diretamente em um protótipo React sem a necessidade de limpar atributos manualmente.
Estudante: aprendendo a sintaxe do React
Compare a entrada HTML com a saída JSX lado a lado para entender quais atributos mudam e por quê. Ver a transformação torna as convenções de nomenclatura do React mais fáceis de memorizar do que ler a documentação sozinha.

Referência de mapeamento de atributos HTML para JSX

A tabela abaixo lista os atributos HTML que mudam quando convertidos para JSX. Atributos não listados aqui (id, src, href, alt, placeholder, etc.) permanecem inalterados porque seus nomes HTML já correspondem aos nomes de propriedade da API do DOM.

Atributo HTMLProp JSXObservações
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

Conversão de estilo inline: HTML vs JSX

Estilos inline são a parte mais propensa a erros na conversão de HTML para JSX, pois tanto o formato do valor quanto os nomes das propriedades mudam:

Atributo style em HTML
Uma string de declarações CSS separadas por ponto e vírgula. Os nomes de propriedade usam kebab-case (background-color, font-size, border-radius). Os valores são sempre strings, incluindo valores numéricos com unidades.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
Prop style em JSX
Um objeto JavaScript com nomes de propriedade em camelCase (backgroundColor, fontSize, borderRadius). Valores de string são colocados entre aspas. Valores numéricos sem unidade (lineHeight, opacity, zIndex, flexGrow) podem ser números simples.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Exemplos de código

Estes exemplos mostram como converter HTML para JSX de forma programática em diferentes linguagens e ambientes. Cada um aborda a renomeação de atributos, conversão de estilos e tratamento de tags de fechamento 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>
}

Perguntas frequentes

Qual é a diferença entre HTML e JSX?
JSX é uma extensão de sintaxe para JavaScript usada pelo React. É parecido com HTML, mas compila para chamadas React.createElement(). As principais diferenças são: class vira className, for vira htmlFor, estilos inline usam objetos JavaScript em vez de strings CSS, e todas as tags devem ser fechadas explicitamente (incluindo elementos vazios como <img />). JSX também permite embutir expressões JavaScript dentro de chaves.
Por que o React usa className em vez de class?
A palavra 'class' é uma palavra reservada em JavaScript. Como JSX compila para chamadas de função JavaScript, usar 'class' como nome de prop causaria um erro de sintaxe. O React escolheu 'className' porque corresponde ao nome da propriedade da API do DOM (element.className) que o JavaScript já usa para ler e definir classes CSS em elementos do DOM.
Preciso converter HTML para JSX manualmente?
Não. Você pode usar um conversor online como esta ferramenta, ou automatizar com bibliotecas como htmltojsx (npm) ou html-react-parser. Para migrações em larga escala, ferramentas como codemod ou jscodeshift podem transformar bases de código inteiras. A conversão manual só é prática para pequenos trechos de algumas linhas.
Como os estilos inline são tratados em JSX?
Em JSX, o atributo style aceita um objeto JavaScript, não uma string CSS. Os nomes de propriedade usam camelCase (backgroundColor em vez de background-color). Os valores são strings por padrão, mas certas propriedades numéricas como lineHeight, opacity e zIndex aceitam números simples sem unidades. As chaves duplas em style={{ color: 'red' }} não são sintaxe especial: as chaves externas são uma expressão JSX e as chaves internas são um objeto literal JavaScript.
Posso usar comentários HTML em JSX?
Não. Comentários HTML (<!-- comentário -->) não são válidos em JSX. Use comentários de bloco JavaScript dentro de chaves: {/* comentário */}. Este conversor trata a transformação automaticamente. Comentários JSX devem estar dentro de um elemento pai, não no nível superior do retorno de um componente.
Quais atributos HTML permanecem iguais em JSX?
A maioria dos atributos HTML mantém seus nomes originais em JSX. Exemplos comuns incluem id, src, href, alt, type, name, value, placeholder, disabled, hidden e todos os atributos data-* e aria-*. Apenas atributos cujo nome HTML difere do nome de propriedade da API do DOM precisam mudar: class para className, for para htmlFor, e atributos compostos que passam de letras minúsculas para camelCase.
dangerouslySetInnerHTML é o mesmo que converter HTML para JSX?
Não. dangerouslySetInnerHTML ignora a renderização do React e injeta HTML bruto diretamente no DOM, o que representa risco de vulnerabilidades XSS. Converter HTML para JSX produz elementos React reais que passam pelo virtual DOM do React e são seguros por padrão. Use a conversão HTML para JSX para marcação estática que você controla. Use dangerouslySetInnerHTML apenas quando precisar renderizar HTML confiável de uma fonte externa que não pode ser convertida para JSX.