Pug to HTML Converter: Compile Pug Templates Without Node.js

Pug's minimal syntax — no angle brackets, no closing tags, indentation for nesting — makes HTML templates concise and readable. But to use Pug HTML in a static page, email template, or non-Node context, you need to compile it first. This converter handles the most common Pug patterns and outputs clean, indented HTML.

Formula

// Pug input div.container#main h1 Hello World p.lead This is a paragraph. a(href="/about") Learn More // HTML output <div class="container" id="main"> <h1>Hello World</h1> <p class="lead">This is a paragraph.</p> <a href="/about">Learn More</a> </div>

Indentation in Pug determines parent-child relationships. Each 2-space (or tab) indent is one level deeper in the HTML hierarchy.

Pug Syntax Shortcuts

Pug makes common HTML patterns compact: .class → class attribute, #id → id attribute, parentheses for other attributes. A tag with both shortcuts like 'section.hero#home(data-scroll="smooth")' compiles to the full '

' attribute set. Omitting the tag name defaults to div (just '.container' → '

').

Text Content and Pipe Nodes

Text content written after the tag name on the same line becomes the element's text child: 'h1 Hello' → '

Hello

'. For text-only lines (no tag), the | pipe prefix marks a text node: '| Terms and conditions' outputs the text without wrapping it in a tag. This is useful for text mixed with inline elements.

When to Use the Full Pug Compiler

This converter handles static Pug syntax. The full Pug compiler (npm package 'pug') additionally evaluates: #{variable} interpolation, mixin definitions and calls (@mixin), template extends and includes, JavaScript in - and = blocks, conditionals (if/else/unless), and iteration (each/for). For templates with variables or logic, install Pug and compile server-side.

Practical Examples

Extracting HTML from a Pug Template

Get the static HTML output of a Pug component without Node.js.

1.Paste the .pug template file content
2.Tags, classes, IDs, and attributes are compiled to HTML
3.Review the indented HTML output
4.Copy and use in a static page, email template, or non-Node context

Pug Syntax Handled

tagname.class#id(attr=val) text → full HTML tag
doctype html →
// comment →
| text → text node (no wrapping tag)
Void tags (br, img, input, etc.) → no closing tag

Good Use Cases

Getting static HTML from a Pug/Express template without Node.js
Migrating a Pug project to plain HTML or another template engine
Understanding what HTML a Pug component produces
Copying Pug snippets from docs and using them in a static site

Frequently Asked Questions

What Pug syntax is supported?

Tag names, .class shortcuts, #id shortcuts, (attribute=value) groups, inline text content (text after the tag), | pipe text nodes, // comments, doctype declarations, and indentation-based nesting. Variables (#{var}), mixins, extends, includes, and JavaScript expressions are not evaluated.

What is Pug and why is it used?

Pug (formerly Jade) is an HTML template engine primarily used with Node.js (Express, Koa). It removes the need for closing tags and angle brackets, using indentation for nesting. It produces cleaner, more compact template files and integrates JavaScript logic directly.

How do I write classes and IDs in Pug?

Append .classname and #idname directly to the tag: 'div.container#hero' becomes '

'. Multiple classes chain: 'p.text-lg.font-bold' becomes '

How do I write attributes in Pug?

Attributes go in parentheses after the tag: 'a(href="/about" target="_blank") About' becomes 'About'. Boolean attributes like 'input(checked)' become ''.

Pug to HTML Converter