HTML to Pug Converter
Paste HTML markup and get the equivalent Pug (Jade) template — class and id shorthand, attributes, nesting, and void tags all handled automatically.
Last updated: May 26, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is HTML to Pug Converter?
Pug (formerly called Jade) is a high-performance template engine for Node.js that uses an indentation-based syntax instead of angle brackets. A `<div class="card">` becomes `.card`, a `<h1 id="title">` becomes `h1#title`, and nesting is expressed through indentation rather than closing tags. This results in significantly more concise templates that many developers find easier to read and maintain.
This converter uses the browser's built-in DOM parser to walk the HTML tree and emit the equivalent Pug syntax. Class names are folded into dot notation (`.class1.class2`), id attributes become `#id` selectors, a lone `div` with classes is shortened to just the class shorthand, and all other attributes go into parentheses. Void elements (`<br>`, `<img>`, `<input>`) are emitted without a closing tag. Full documents with `<!DOCTYPE html>` emit `doctype html` followed by the `html` element.
How to Use HTML to Pug Converter
Paste HTML into the input panel.
The Pug equivalent appears instantly on the right.
Click Copy or Download .pug to use the result in your project.
Common Use Cases
- Migrating a static HTML page to a Pug/Express.js template.
- Converting HTML mocks from a designer into Pug components for a Node.js app.
- Learning Pug syntax by seeing how familiar HTML maps to Pug.
- Speeding up the process of adapting HTML email templates to Pug.
- Reducing boilerplate in an existing HTML codebase by switching to Pug.
Example Input and Output
A card component in HTML becomes compact Pug with shorthand selectors.
<div class="card">
<h2 id="title">Hello</h2>
<a href="/" class="btn">Go home</a>
</div>.card
h2#title Hello
a.btn(href='/') Go homePrivacy
All conversion happens in your browser. No HTML or Pug is sent to a server.
Script and style blocks
Inline <script> and <style> blocks are rendered using Pug's block literal syntax (dot after the tag name) to preserve their content verbatim.
Text with mixed inline elements
Pug handles inline elements differently from block elements. Complex mixed content (text interleaved with <strong>, <a>, etc.) may need manual adjustment in the output.