Quais atributos são renomeados?

class para className, for para htmlFor, tabindex para tabIndex, readonly para readOnly, colspan para colSpan, além de camelCase para todas as propriedades padrão de DOM e handlers on*.

Como a string de style é convertida?

É dividida em ponto-e-vírgula, cada propriedade CSS é camelCased e o resultado sai como objeto JSX entre chaves duplas. Vendor prefixes e propriedades customizadas são preservados.

data-* e aria-* mudam?

Não. O JSX aceita ambos em kebab, então o conversor não toca. Só atributos padrão de DOM são renomeados.

Comentários HTML são convertidos?

Sim. vira {/* comentário */} no JSX para manter o mesmo propósito sem quebrar o parser.

E scripts e handlers inline?

O conversor renomeia onclick para onClick e os demais handlers, mas o corpo da função fica como string. Em geral você reescreve como callback React de verdade antes de subir.

Meu HTML é enviado para algum lugar?

Não. A transformação roda inteira nesta aba do navegador. O Toova não tem visão do que você colou — sem analytics, sem logs, nada.

HTML para JSX — class, for, style, on-handlers

Conversor HTML → JSX

Privado por design — roda inteiramente no seu navegador

Cole HTML do lado esquerdo e copie JSX pronto para React do outro. O conversor reescreve class para className, for para htmlFor, strings de style inline para objetos camelCase e fecha void elements como img e input para o JSX conseguir parsear.

Atributos e eventos remapeados

O React reusa os nomes de propriedade DOM em vez dos atributos HTML: tabindex vira tabIndex, readonly vira readOnly, colspan vira colSpan. Handlers inline saem de onclick para onClick, de onmouseover para onMouseOver, e assim por diante para todo handler padrão. Os dois renomeios exclusivos de HTML são class para className e for para htmlFor, porque ambos são palavras reservadas em JavaScript.

Strings de style em objetos camelCase

O JSX exige que styles inline sejam objetos literais com cada propriedade CSS em camelCase. Uma string como padding: 1rem; background-color: #fff vira style={{ padding: '1rem', backgroundColor: '#fff' }}. O conversor trata kebab-case para camelCase, prefixos de vendor (-webkit-, -moz-, -ms-) e propriedades customizadas do CSS (--brand-color é mantida, com chave entre aspas quando necessário).

Privacidade e casos especiais

A transformação acontece numa única função JavaScript desta aba. Seu HTML não sai do navegador — o que importa quando você está portando markup com dados de clientes. Os 14 void elements (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) saem self-closed para que o JSX aceite. Atributos data- e aria- ficam intactos porque já são válidos no JSX.

Perguntas Frequentes

Quais atributos são renomeados?: class para className, for para htmlFor, tabindex para tabIndex, readonly para readOnly, colspan para colSpan, além de camelCase para todas as propriedades padrão de DOM e handlers on*.
Como a string de style é convertida?: É dividida em ponto-e-vírgula, cada propriedade CSS é camelCased e o resultado sai como objeto JSX entre chaves duplas. Vendor prefixes e propriedades customizadas são preservados.
data-* e aria-* mudam?: Não. O JSX aceita ambos em kebab, então o conversor não toca. Só atributos padrão de DOM são renomeados.
Comentários HTML são convertidos?: Sim.  vira {/* comentário */} no JSX para manter o mesmo propósito sem quebrar o parser.
E scripts e handlers inline?: O conversor renomeia onclick para onClick e os demais handlers, mas o corpo da função fica como string. Em geral você reescreve como callback React de verdade antes de subir.
Meu HTML é enviado para algum lugar?: Não. A transformação roda inteira nesta aba do navegador. O Toova não tem visão do que você colou — sem analytics, sem logs, nada.