Ir para o conteúdo

Conversor de HTML e SVG para JSX (React)

Cole HTML ou SVG bem formado e copie o JSX: class vira className, style vira objeto, atributos com hífen viram camelCase e as tags void são fechadas.

  • Roda no seu navegador

Entrada

0 de 20.000 caracteres

HTML ou SVG bem formado, com todas as tags fechadas. Até 20.000 caracteres.

Envolver em fragmento

O JSX precisa de um único elemento na raiz; o fragmento resolve quando há vários.

Comentários HTML

Resultado

O resultado aparece aqui.

O que a conversão troca

  • Atributos: class vira className, for vira htmlFor e nomes como tabindex e maxlength ganham maiúsculas (tabIndex, maxLength).
  • SVG: nomes com hífen viram camelCase, como stroke-width em strokeWidth, e xlink:href vira xlinkHref. Os atributos aria-* e data-* mantêm o hífen.
  • Style: o texto do atributo vira um objeto, com font-size em fontSize e prefixos como -webkit-x em WebkitX.
  • Tags void, como br, img e input, e qualquer tag escrita com barra saem fechadas, que é o que o JSX exige.

Um SVG com um path e um circle, por exemplo, tem 3 elementos no total, contando o svg.

O que a entrada aceita

Cole HTML ou SVG bem formado: tag aberta e não fechada, fechamento sem abertura e um sinal de menor solto no texto são recusados. As chaves e o sinal de maior do texto são escapados. O conteúdo de script e style vira texto literal, os comentários viram comentários do JSX e o doctype é removido. Espaços, quebras de linha e entidades como nbsp ficam como estão.

Se houver mais de uma tag na raiz, a opção automática envolve tudo em um fragmento.

Confira depois

  • A lista de atributos cobre os mais comuns; revise os incomuns.
  • Atributos de evento, como onclick, ficam como texto e precisam virar funções no React.
  • As regras seguem o React. Entidades dentro do atributo style não são decodificadas.

Perguntas frequentes

Como converter HTML para JSX?

Cole o trecho no campo e copie o resultado. A ferramenta troca class por className, for por htmlFor, converte style em objeto e fecha as tags void.

Como converter SVG para JSX no React?

Cole o SVG inteiro. Os atributos com hífen, como stroke-width e fill-rule, viram camelCase e o viewBox é mantido.

O que muda do HTML para JSX?

Os nomes de alguns atributos, o formato do style, o fechamento obrigatório das tags e o escape de chaves no texto. Eventos como onclick precisam virar funções.