HTML para JSX

Converta HTML em JSX do React: class para className, estilos inline em objetos, tags autofechadas e comentários. Opção de envolver em componente. Grátis.

Sobre esta ferramenta

Converta HTML em JSX do React. Atributos são renomeados (class → className, for → htmlFor), estilos inline viram objetos, tags vazias se autofecham e comentários viram comentários JSX.

Como usar

Cole o HTML.
Se quiser, ative Envolver em componente.
Copie o JSX para o seu código React.

Perguntas frequentes

E se houver vários elementos raiz?

Eles são envolvidos em um fragment <>…</> para que o resultado seja JSX válido.

Os handlers de evento são convertidos?

onclick vira onClick, mas o valor continua sendo uma string. Troque-o por uma função no seu componente.

Como são tratadas as chaves { } no texto?

Elas são escapadas como {'{'} e {'}'} para que o JSX não as trate como expressões.

Ferramentas relacionadas

Codificar / Decodificar entidades HTML – Escape e desfaça o escape de entidades HTML
Pré-visualização HTML – Renderize HTML em um quadro isolado
SVG para CSS – Converta SVG em data URI para fundos CSS

Formatar

Formatar / Validar JSON – Formate, minifique e valide JSON
Ordenar / Remover linhas duplicadas – Ordene, remova duplicadas, inverta e apare linhas

Codificar / Decodificar

Codificar / Decodificar Base64 – Converta texto para Base64 e vice-versa (UTF-8)
Codificar / Decodificar URL – Codificação percentual de URL
Codificar / Decodificar entidades HTML – Escape e desfaça o escape de entidades HTML
Codificar / Decodificar imagem Base64 – Converta imagens em data URI e visualize imagens Base64
Escapar / Desfazer barras invertidas – Escape aspas, quebras de linha e caracteres de controle
Hex ↔ ASCII – Converta texto em bytes hexadecimais e vice-versa
Depurador JWT – Decodifique o cabeçalho e o payload de um JSON Web Token

Gerar

Gerar / Decodificar UUID / ULID – Gere UUID v4 / v7 e ULID, e decodifique IDs existentes
Gerador de hash – MD5, SHA-1, SHA-256, SHA-384 e SHA-512
Gerador de strings aleatórias – Strings aleatórias criptograficamente seguras
Gerador de Lorem Ipsum – Texto de preenchimento em parágrafos, frases ou palavras
Gerar / Ler QR code – Crie QR codes e leia-os a partir de imagens

Converter

Conversor de horário mundial – Converta um horário entre fusos; começa pelo horário atual deste computador
Conversor de tempo Unix – Converta timestamps Unix e datas
Conversor de bases numéricas – Converta entre binário, octal, decimal e hexadecimal
YAML ↔ JSON – Converta YAML em JSON e vice-versa
CSV ↔ JSON – Converta CSV em JSON e vice-versa
HTML para JSX – Converta HTML em JSX do React
Query string ↔ JSON – Converta query strings de URL em JSON e vice-versa
Analisador de URL – Divida uma URL em partes e parâmetros de consulta
Conversor de cores – Converta entre HEX, RGB, HSL, HWB e CMYK
SVG para CSS – Converta SVG em data URI para fundos CSS
JSON ↔ array PHP – Converta JSON para sintaxe de array PHP e vice-versa
PHP Serialize / Unserialize – Converta JSON para o formato serialize() do PHP e vice-versa

Texto

Testador de RegExp – Teste expressões regulares e veja as correspondências
Conversor de maiúsculas/minúsculas – camelCase, snake_case, kebab-case e mais
Inspetor de strings – Conte caracteres, bytes e palavras e inspecione code points
Comparador de texto – Compare dois textos por linha, palavra ou caractere

Inspecionar

Analisador de cron – Explique expressões cron e veja as próximas execuções
Analisador de cURL – Decomponha um comando cURL e converta para fetch()
Decodificador de certificado X.509 – Inspecione certificados PEM e cadeias

Pré-visualização

Pré-visualização de Markdown – Renderize Markdown no estilo GitHub
Pré-visualização HTML – Renderize HTML em um quadro isolado