1001Ferramentas
🔄Conversores

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.

Para HTML bem-formado. Não cobre <script>/<style> com conteúdo nem tags mal-fechadas.

Cada tag HTML vira o nome do elemento sem <>, e o aninhamento é feito por indentação.

<ul><li>Item</li></ul>ul\n li Item

Atributos: <a href="/x">a(href="/x"). Classes: div.classe. IDs: div#meu-id.

Do HTML fechado para a indentação do Pug

Você entrou num projeto Express que renderiza Pug e recebeu um bloco de HTML pronto: um card do Bootstrap, um trecho de landing page, o rodapé do site antigo. Reescrever à mão significa apagar cada tag de fechamento e contar indentação linha por linha, e basta errar dois espaços para o layout desabar. Aqui você cola o HTML de um lado e a versão Pug aparece do outro enquanto digita.

A conversão roda num parser próprio, sem usar o DOM do navegador. O id e as classes saem no atalho de seletor (div#c1.card.ativo), os demais atributos entram entre parênteses e tags vazias como img, br e input não abrem bloco. Quando o elemento tem só texto, ele fica na mesma linha (h2 Oi); quando mistura texto e tags, o texto vira linha começando com barra vertical. Um detalhe: a linha do DOCTYPE não vira doctype html, sai como texto comum e você apaga.

Feche todas as tags antes de colar. Um item de lista sem a tag de fechamento é HTML válido, mas aqui o item seguinte entra aninhado dentro do anterior. Script e style com conteúdo também não sobrevivem, como o próprio campo avisa. Atributos de Vue e Alpine perdem o prefixo: @click vira click e :class é lido como class comum. Nada sai do navegador, o texto colado não vai para servidor nenhum.

Perguntas frequentes

Pug e Jade são a mesma linguagem?
São. O projeto se chamava Jade e foi renomeado em 2016 por conflito de marca. A sintaxe básica que essa página gera funciona igual nos dois.
Dá para converter Pug de volta para HTML?
Nesta página não, a conversão é só de ida. Para o caminho inverso use o compilador oficial, com npx pug arquivo.pug.
Como fica texto misturado com tags inline?
Ele é quebrado em linhas separadas, uma para cada pedaço. Em trechos sem espaço, como um preço com o valor dentro de um strong, isso muda o espaçamento renderizado, então confira antes de commitar.

Ferramentas Relacionadas