Loading...
Convert Jade templates to HTML (Jade is now called Pug)
Convert Jade template to HTML instantly with our free online Jade to HTML converter. This tool helps developers transform Jade/Pug template syntax into HTML markup for web development. Simply paste your Jade code and get HTML output in real-time.
Jade was renamed to Pug in 2016. This tool uses the Pug package for conversion. Requires pug package - basic conversion only. Install with: npm install pug
Jade (now Pug) is a high-performance template engine that uses indentation-based syntax to generate HTML. The project was renamed from Jade to Pug in 2016 for trademark reasons.
Jade to HTML converter transforms Jade template syntax into standard HTML markup. Jade (now called Pug) is a high-performance template engine with clean, whitespace-sensitive syntax that compiles to HTML. Essential for legacy Jade projects and learning template engines.
Parse Jade syntax (indentation-based structure, tag shortcuts, attributes in parentheses) and convert to HTML. Handle mixins, includes, extends, conditionals, and iterations. Generate properly indented, valid HTML output.
Jade uses indentation for nesting (like Python), tag names without brackets (div, p, span), classes/ids with CSS selectors (div.class#id), attributes in parentheses. Jade was renamed to Pug in 2016 due to trademark issues. Same syntax, different name.
Convert old Jade templates to HTML.
Migrate from Jade to static HTMLUnderstand what Jade compiles to.
See the HTML output for template issues.
Generate static HTML from Jade source.
// Jade input:
doctype html
html(lang="en")
head
meta(charset="UTF-8")
title My Page
link(rel="stylesheet", href="style.css")
body
header.main-header
nav#main-nav
ul
each item in ['Home', 'About', 'Contact']
li
a(href="#")= item
main.content
h1 Welcome
p.intro This is a paragraph with a #[strong bold word].
if showButton
button.btn.btn-primary Click me
footer
p © 2024
// HTML output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main-header">
<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main class="content">
<h1>Welcome</h1>
<p class="intro">This is a paragraph with a <strong>bold word</strong>.</p>
<button class="btn btn-primary">Click me</button>
</main>
<footer>
<p>© 2024</p>
</footer>
</body>
</html>Jade uses indentation for nesting, CSS selectors for classes/ids, and parentheses for attributes. Much cleaner than HTML.
Use Jade to HTML converter when working with legacy Jade templates, learning template syntax, or generating static HTML from Jade source files.
Same thing. Jade was renamed to Pug in 2016 due to trademark issues. Syntax is identical. If using a package, use "pug" not "jade" as jade package is deprecated.