About the HTML to Pug Converter
Pug drops the angle brackets and closing tags and uses indentation for nesting, which usually cuts a template by a third. Converting by hand is dull and error prone, so this page walks the parsed DOM and writes the equivalent Pug for you. Identifiers become #id, classes become a chain of .class segments, and a <div> that carries either one loses its tag name entirely because div is what Pug assumes.
Remaining attributes are written in parentheses with single quoted values, and valueless attributes such as download, required or hidden are written bare, exactly as a Pug author would. Void elements get no children and no closing anything. Script and style contents are emitted as a block after a dot, with the original relative indentation preserved so the JavaScript inside still reads correctly. Comments become Pug comments.
Short text is folded onto the tag line, which is the idiomatic form, and anything longer or multi-line becomes piped | lines underneath. Untick the inline option if your house style keeps text on its own line always. A class or id containing characters Pug shorthand cannot express, such as a colon from a utility framework, falls back to a normal attribute so nothing is lost. Round trip the result through Pug to HTML to confirm the markup still matches.
How to use
- Paste the markup on the left. A fragment converts as happily as a whole page.
- Choose the indent your project uses. Pug is indentation sensitive, so this matters.
- Copy the template, or press Swap to send it straight back through the Pug compiler.
Common questions
- Why did the div tag disappear from some lines?
- Pug treats a leading class or id with no tag name as a div, so writing .card is the same as div.card. The tag name is kept whenever there is no shorthand to lean on.
- Are inline scripts converted to Pug?
- The script element becomes a block with a trailing dot and the JavaScript is copied in verbatim, keeping its own indentation. Pug never tries to parse it.
- What happens to Tailwind classes with colons?
- A class such as md:flex cannot be written as shorthand, so it stays inside a normal class attribute in the parentheses.
- Does the converter produce loops or mixins?
- No. It produces a literal template. Turning repeated blocks into an each loop or a mixin is a judgement call and stays with you.