WebToolsPlanet
Converter Tools

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

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 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

1

Paste HTML into the input panel.

2

The Pug equivalent appears instantly on the right.

3

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.

HTML input
<div class="card">
  <h2 id="title">Hello</h2>
  <a href="/" class="btn">Go home</a>
</div>
Pug output
.card
  h2#title Hello
  a.btn(href='/') Go home

Privacy

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.

Frequently Asked Questions

What is the difference between Pug and Jade?

They are the same template engine. The project was renamed from Jade to Pug in 2016 due to a trademark issue. Modern versions use the Pug name.

Why is div omitted when there are classes?

In Pug, a bare selector like .card implicitly creates a div element. Writing div.card is redundant, so this converter drops the div tag when the element already has an id or class.

Does it handle inline styles?

Inline styles are preserved as a style attribute in Pug attribute syntax, e.g. div(style="color:red"). They are not converted to Pug variables.

Does it handle template literals or Pug mixins?

No — this is an HTML-to-Pug structural converter, not a Pug authoring tool. The output is static Pug markup equivalent to the input HTML.

Does this send my HTML anywhere?

No. The conversion uses the browser's built-in DOMParser and runs entirely locally.

Related Tools

Part of a Collection