Ir para o conteúdo
AZ Tools

Conversor HTML → JSX

Conversor feito à mão que reescreve as tarefas chatas de portar HTML pra um componente React: renomeação de atributos (`class`, `for`, `tabindex`, etc.), capitalização de handlers de evento inline (`onclick → onClick`), auto-fechamento de tags void (`<br>` → `<br />`), comentários HTML pra comentários JSX, e conversão opcional de `style="color: red; font-size: 14px"` pra um objeto literal `style={{ color: 'red', fontSize: '14px' }}`.

—
JSX
<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

Valores de atributo string entre aspas ficam como strings; se precisar de expressão JS, mude no JSX depois de copiar.

Como usar

  1. Cole um snippet HTML.
  2. Alterne a opção wrap-in-fragment se você quer uma raiz única pra um componente React.
  3. Copie o JSX pro arquivo do seu componente.

Perguntas frequentes

Quais atributos são renomeados?
Todos os que o React renomeia: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, mais cada handler de evento `on…`. Atributos `aria-` e `data-` ficam em kebab-case.
E se meu style inline tem variáveis CSS?
Propriedades que começam com `--` são citadas como chaves string (`'--accent': 'blue'`) pra sobreviver ao JSX. Propriedades com prefixo de vendor como `-webkit-…` também são citadas.
Executa meu JavaScript ou avalia scripts?
Não. O parser é um pequeno scanner manual — tags `<script>` passam como texto igual a qualquer outro elemento. A conversão é puramente em nível de string.

Ferramentas relacionadas

Conversor de CSS para objeto de estilo JS

Converta um bloco de declarações CSS em um objeto de estilo inline React/JS, no seu navegador.

Desenvolvimento 0 0

Conversor de JSON para data class Kotlin

Transforme um objeto JSON em data classes Kotlin com propriedades tipadas, no seu navegador.

Desenvolvimento 0 0

Conversor de JSON para classe C#

Transforme um objeto JSON em classes C# com mapeamento de tipos em autopropriedades, no seu navegador.

Desenvolvimento 0 0

Conversor de JSON para classe Java (POJO)

Transforme um objeto JSON em classes POJO Java com campos tipados, no seu navegador.

Desenvolvimento 0 0

Gerador de EditorConfig

Crie um arquivo .editorconfig com estilo de indentação, fim de linha, charset e overrides comuns, no seu navegador.

Desenvolvimento 0 0

Codificador / Decodificador de Entidades HTML

Escape caracteres especiais (& < > " ') ou decodifique entidades para os caracteres originais.

Desenvolvimento 0 0