About

Pug (formerly Jade) is a high-performance template engine heavily used in the Node.js ecosystem. Its primary advantage is a terse, readable syntax that eliminates the need for closing tags and angle brackets. However, manually converting existing HTML templates to Pug is error-prone due to Pug's strict reliance on whitespace indentation. A single misaligned space can break the entire template.

This tool parses your HTML and reconstructs it using Pug's shorthand syntax. It intelligently converts <div class="box"> into .box, handles ID attributes like #main, and pipes multiline text correctly. It is an essential utility for developers modernizing legacy codebases or switching templating engines.

Formulas

Pug relies on depth-based indentation. The converter calculates depth d for each node in the DOM tree.

indent(d) = " " × d

When constructing the tag string, the converter checks for the existence of `id` and `class` attributes to utilize Pug's dot notation, prioritizing brevity:

if tag == "div" and (hasId or hasClass) → omit tag name

Reference Data

Feature	HTML Input	Pug Output
Classes	<div class="nav item">	.nav.item
IDs	<div id="header">	#header
Attributes	<input type="text">	input(type="text")
Content	<p>Hello</p>	p Hello
Nesting	<ul><li>A</li></ul>	ul li A
Self-closing	<img src="...">	img(src="...")

Frequently Asked Questions

The output defaults to 2 spaces for indentation, which is the standard convention in the Pug community. This ensures the output is compatible with most linting rules.

Script tags containing inline JavaScript are converted using the dot block syntax (script.). This tells the Pug compiler to treat the indented block following the tag as plain text/code.

Yes. The tool handles the Doctype declaration and the html, head, and body tags, preserving the document structure entirely.