WebToolsPlanet
Converter Tools

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

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What 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

1

Paste HTML into the input panel.

2

Toggle options: quote style, comment preservation, doctype format.

3

The Pug output appears instantly on the right.

4

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.

HTML input
<div id="app" class="container">
  <h1>Hello</h1>
  <p class="intro">World</p>
</div>
Pug output
#app.container
  h1 Hello
  p.intro World

Privacy

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.

Frequently Asked Questions

What is the difference between Jade and Pug?

Jade was renamed to Pug in 2016 due to a trademark conflict. They are the same template engine — Pug is the current name.

Does this support all HTML attributes?

Yes. Any HTML attribute is included in the Pug attribute list. Boolean attributes (like disabled or checked) are rendered without a value.

How are script and style contents handled?

Script and style block contents are rendered verbatim inside a Pug dot (.) block, which passes the content through unchanged.

Does this send my HTML anywhere?

No. All conversion happens locally in your browser.

Related Tools