HTML Tools
Jade / Pug to HTML Converter
Indentation in, angle brackets out — Jade/Pug templates expanded to clean HTML with a rendered preview.
In short
Convert Jade/Pug templates to HTML online: tags, ids, classes, attributes, nesting and text — rendered instantly with live preview. Free, in-browser.
By NaveenKumar T · Updated
- Tags, ids, classes, attributes
- Nesting by indentation
- Comments & doctype handled
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
JADE to HTML: input and output
A sign-in page template using both comment styles, a boolean attribute and piped text.
doctype html
html(lang="en")
head
title Sign in
body
//- internal note, not rendered
form#login.card(action="/session", method="post")
// labels double as hints
label
| Email
input(type="email", name="email", required)
button.btn.primary(type="submit") Continue
p.hint
| Forgot it?
a(href="/reset") Reset your password<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign in</title>
</head>
<body>
<form id="login" class="card" action="/session" method="post">
<!-- labels double as hints -->
<label>
Email
<input type="email" name="email" required />
</label>
<button class="btn primary" type="submit">Continue</button>
<p class="hint">
Forgot it?
<a href="/reset">Reset your password</a>
</p>
</form>
</body>
</html>The //- comment was dropped while // became an HTML comment, input(…, required) turned into a self-closing <input … required />, and the piped | text kept the link inside the paragraph.
Learn more
From Jade templates back to HTML
Jade (renamed Pug) compresses HTML into indentation: no closing tags, CSS-selector shorthand for ids and classes. Converting back to HTML is the common migration direction — projects moving to JSX, framework templates, or plain markup. This tool expands the structure mechanically, so a 40-line template becomes correct HTML in one click instead of an hour of retyping.
Migrating off Pug, template by template
Express apps from the 2014–2019 era are full of .jade and .pug views, and modernization usually means React, plain HTML partials, or a different template engine — all of which want angle brackets. The sustainable migration loop: convert a template here, drop the static HTML into the new system, re-add the dynamic parts (loops, conditionals, includes) in the target language's idiom, delete the .pug file. The converter handles the part that's mechanical and error-prone; you handle the part that requires judgment.
It's also the fastest Pug reader for non-Pug developers: handed a template you can't parse mentally, convert it and read the HTML instead.
Help
Frequently asked questions
Everything you need to know about the JADE to HTML.
01How do I use the JADE to HTML?
Paste your Jade/Pug template and press Convert. Elements expand to HTML with ids, classes, and attributes in place; nesting follows your indentation. Preview mode renders the result.
02Which Pug features does the converter support?
The structural core that templates are made of: element/tag lines with #id and .class shorthands, (attribute) lists, nested blocks by indentation, piped | text, // comments, and doctype. Dynamic features (variables, mixins, conditionals) are language runtime — convert the static structure here, port logic by hand.
03Why did an element nested under a line with inline text end up outside it?
A tag that carries text on the same line — p.hint Forgot it? — is written and closed immediately, so anything indented beneath it becomes a sibling rather than a child. Put the text on its own piped line instead: p.hint, then | Forgot it?, then a(href="/reset") Reset, each indented under the paragraph, and the link lands inside the <p>. The same rule explains block text: script. and p. followed by indented lines are not recognised, so use | lines for multi-line text.