HTML Tools
HTML to Jade / Pug Converter
Angle brackets in, clean indentation out — HTML collapsed to idiomatic Jade/Pug shorthand.
In short
Convert HTML to Jade/Pug templates online: tags collapse to selector shorthand, nesting becomes indentation, attributes preserved. Free, in-browser.
By NaveenKumar T · Updated
- div.class#id shorthand
- Nesting becomes indentation
- Attributes preserved
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
HTML to JADE: input and output
A product card with a class-only wrapper, an id'd badge, an embedded comment, and a link inside a paragraph — the mix of shorthand cases a real page actually has.
<div class="product-card">
<div id="badge-new">New</div>
<!-- Product image -->
<img src="/img/lamp.jpg" alt="Brass desk lamp">
<h2 class="product-card__title">Brass Desk Lamp</h2>
<p class="product-card__price">$89.00</p>
<p>
Handmade in Portugal. <a href="/shipping">See shipping options</a>.
</p>
<button class="btn btn--primary" type="button">Add to cart</button>
</div>.product-card
#badge-new New
// Product image
img(src="/img/lamp.jpg", alt="Brass desk lamp")
h2.product-card__title Brass Desk Lamp
p.product-card__price $89.00
p
| Handmade in Portugal.
a(href="/shipping") See shipping options
| .
button.btn.btn--primary(type="button") Add to cartThe class-only div collapsed to .product-card and the id-only div collapsed to #badge-new — Pug drops the div keyword whenever an id or a class is present, keeping it only when neither exists. The comment carried over as a Pug comment line, and the paragraph containing a link split across three lines: two piped text runs framing the a(href="/shipping") element in between.
Learn more
Adopting Pug from existing markup
Teams adopting Pug rarely start from blank files — they convert existing pages. Doing that by hand means inverting every tag into indentation without dropping an attribute. This converter does the mechanical inversion: real DOM parsing (not regex), selector shorthand where idiomatic, text and comments carried over, ready for the template logic you'll add next.
Why Pug still earns converts
Pug remains the most readable way to author HTML-heavy views: no closing tags to mismatch, selector shorthand that mirrors the CSS you'll write anyway, and indentation that IS the structure rather than decorating it. Teams running Express/Koa server-rendered apps choose it for exactly that maintenance ergonomics — and their first task is always converting the existing pages, which is this tool's job. A typical landing page converts in seconds and shrinks to roughly 60% of its line count.
Keep the conversion honest by round-tripping: convert to Pug here, convert back with the Jade to HTML page, and diff against the original to confirm nothing structural was lost.
Help
Frequently asked questions
Everything you need to know about the HTML to JADE.
01How do I use the HTML to JADE?
Paste HTML and press Convert. Elements collapse to Pug lines — div#main.card becomes exactly that — with children indented beneath. Copy the result into your .pug/.jade file.
02Why did my <div> disappear from the output?
Pug idiom: a div with an id or class needs no tag name — <div class="card"> is just .card. The converter applies that convention automatically (it's what hand-written Pug looks like); divs without ids or classes keep their name.
03What happens to text mixed with inline tags, like a paragraph containing a link?
Mixed content is split: each text run becomes a piped | line and each element its own line, all indented under the parent, so <p>See the <a href="/docs">docs</a> first</p> becomes p, | See the, a(href="/docs") docs, | first. An element whose only child is text collapses to one line — p Hello. Every text run is trimmed, which means the space between two adjacent inline elements (</b> <i>) is lost; add it back with a | line or before you render the template.