Overview
Converts HTML markup into Pug (formerly Jade) template syntax using the browser's own HTML parser. Divs with id or class attributes collapse to Pug shorthand, class lists become dot-chains, other attributes move into parentheses, and text children are inlined after the tag. The conversion runs live as you type and the output is click-to-copy.
How It Works
Paste HTML into the input panel. The tool parses it into a node tree, ignores the html, head, and body wrappers, and emits one Pug line per element with two-space indentation per nesting level. A div with id main and class hero-card becomes #main.hero-card on its own line; a p with text becomes p Your text on one line; other attributes become a(href="/tools", target="_blank"). Copy the result from the output panel.
Step-by-Step Usage Guide
- Paste your HTML into the input panel.
- Review the Pug output, checking shorthand lines like #id.class and attribute parentheses.
- Re-add any comments you need; HTML comments are not carried over.
- Copy the output into your .pug template and verify it renders identically.
Technical Specifications & Standards
Conversion walks the DOM tree that the browser's DOMParser builds, which gives it real tag-soup tolerance: malformed HTML is normalized by the parser before conversion, the same way a browser would repair it. The tag-shorthand logic follows Pug conventions closely: the div keyword is omitted when the element has an id or class, since #id.class alone implies a div; multiple classes are chained as .a.b; and the id and class attributes are removed from the parenthesized attribute list because the shorthand already encodes them. An element whose only child is a single text node is emitted on one line, tag then space then text, and multi-child elements put the tag alone and indent the children, with text nodes rendered after a pipe character, which is Pug's plain-text syntax. Three things are dropped rather than converted. HTML comments are discarded, because comment nodes are neither elements nor text in the walk and Pug's comment syntax is never emitted. Script and style elements come through as ordinary tags with their content as piped text, which loses the raw-block semantics Pug would want. And the head, body, and html elements are stripped at the top level, so the output is a fragment suitable for a template body, not a full page.
Targeted Use Cases
- Migrating legacy HTML templates to a Pug-based build.
- Learning Pug's shorthand by seeing the exact equivalent of your markup.
- Converting a design handoff's HTML into maintainable indented templates.
- Cleaning up generated HTML with deep nesting into readable template files.
Notes & Gotchas
- Expect comments to disappear; re-add them in Pug syntax where they matter.
- Check script and style blocks after conversion; their content becomes piped text, not Pug's raw block form.
- Remember the output is a fragment: html, head, and body wrappers are intentionally stripped.
- Verify whitespace-sensitive rendering after converting, since Pug makes indentation structurally significant.
Frequently Asked Questions
Why does my div render as just #main.hero-card without the word div?
In Pug, an id or class shorthand without a tag name implies a div, so the converter omits the redundant keyword. Elements with neither id nor class keep their explicit tag name.
Are HTML comments preserved?
No. Comment nodes are skipped during the tree walk and never emitted as Pug comments. Re-add any comments you need in the template afterward.
What happened to the html, head, and body tags?
They are intentionally stripped at the top level, so the output is a body fragment. Pug templates usually extend a layout that owns those elements.
How are attributes without id or class converted?
Into a parenthesized list after the tag, in attribute="value" form separated by commas, matching Pug's attribute syntax. The id and class attributes are excluded because the shorthand notation covers them.