Conversor HTML para HAML
Converta HTML para a sintaxe indentada do HAML, sem tags de fechamento. Cole o HTML e copie o HAML — ideal para views de projetos Ruby on Rails.
Copiado!
Para HTML bem-formado. Não cobre <script>/<style> com conteúdo nem tags mal-fechadas.
Cada elemento começa com %. <p>Olá</p> vira %p Olá.
Use shorthand: %div.classe#id. Aninhe por indentação (2 espaços).
Atributos: %a{href: "/x", target: "_blank"} link.
Cole o HTML, receba HAML indentado
Você herdou uma view do Rails cheia de sinal de maior e de menor, e o time hoje escreve HAML. Converter na mão é trabalho chato, e é justo no trabalho chato que a indentação escorrega e reposiciona metade da árvore sem avisar. Cole o HTML no campo de cima e a versão indentada aparece embaixo, com linhas em %tag, atributos entre chaves e nenhuma tag de fechamento para controlar.
A conversão passa por um parser pequeno, escrito à mão em cima de expressão regular, sem envolver o DOM. Ele conhece as tags vazias (img, br, input, meta e companhia) e não abre bloco para elas, transforma comentário HTML em linha iniciada por barra e aplica o atalho de div, então uma div com class vira só .card. Atributo vira hash: um link com href sai como %a{href: "/x"} link.
Ele espera marcação bem formada. Tag sem fechamento, conteúdo dentro de script ou style e blocos CDATA ficam fora do que o parser cobre. O texto de cada nó é aparado, então um parágrafo com negrito no meio vira três linhas e perde o espaço entre as palavras — junte essas na mão. Atributo booleano como required chega com valor vazio, e o doctype passa como texto literal, então troque por !!!. Nada é enviado: converte no navegador.
Perguntas frequentes
Ele entende ERB ou Ruby?
Aninhamento profundo sobrevive?
Dá para ir de HAML para HTML aqui?
Ferramentas Relacionadas
Conversor HTML para Pug
Converta HTML para a sintaxe indentada do Pug (antigo Jade), sem tags de fechamento. Cole o HTML e veja a versão Pug — ideal para templates de Node.js e Express.
Conversor JSX para HTML
Converte sintaxe JSX (React) para HTML padrão substituindo className por class e atributos camelCase em kebab-case.
HTML para JSX
Converta HTML para JSX do React automaticamente. Transforma class→className, for→htmlFor, converte atributos para camelCase e fecha tags vazias.