HTML to Jade / Pug Converter
Paste HTML and get the equivalent Pug (formerly Jade) template with id/class shorthand, nested indentation, and proper attribute syntax.
Last updated: May 26, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is HTML to Jade / Pug Converter?
Pug (formerly Jade) is a high-performance HTML template engine with a clean, whitespace-significant syntax. Instead of opening and closing tags, Pug uses indentation to define nesting. Classes and IDs are written as shorthand (`.class` and `#id`), and attributes go in parentheses after the tag name.
This tool converts standard HTML to Pug syntax using a DOM-based parser. It handles the full HTML structure: doctypes, nested elements, attribute lists, void tags, inline text content, and verbatim `<script>` and `<style>` blocks. The output is a valid Pug template ready to use in Node.js projects.
How to Use HTML to Jade / Pug Converter
Paste HTML into the input panel.
Toggle options: quote style, comment preservation, doctype format.
The Pug output appears instantly on the right.
Copy and use it in your Pug/Node.js project.
Common Use Cases
- Migrating an existing HTML project to a Pug-based template engine.
- Converting HTML snippets from a designer into Pug templates.
- Learning Pug syntax by converting familiar HTML.
- Generating Pug starting points from HTML prototypes.
Example Input and Output
A simple HTML structure converts to Pug with id/class shorthand.
<div id="app" class="container">
<h1>Hello</h1>
<p class="intro">World</p>
</div>#app.container
h1 Hello
p.intro WorldPrivacy
All conversion happens in your browser. No HTML is sent to a server.
div shorthand
In Pug, if a tag has an id or class but is a div, the "div" tag name can be omitted. This tool automatically omits "div" when an id or class is present, producing #id.class instead of div#id.class.