WebToolsPlanet
Converter Tools

Pug to HTML Converter

Paste Pug (Jade) template code and get the equivalent HTML — indentation, selectors, attributes, and void tags are 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 Pug to HTML Converter?

Pug (formerly Jade) is a template engine for Node.js that uses indentation instead of closing tags. A line like `.card` becomes `<div class="card">`, and the elements indented below it become its children. The result is markup that is much more concise than HTML.

This converter implements a Pug-to-HTML parser entirely in the browser. It parses each line to extract the tag, id, classes, and attributes, then uses indentation to track parent-child relationships. Void elements (`<img>`, `<br>`, `<input>`) are emitted without closing tags. Block literals (tag followed by `.` and indented content) are preserved verbatim.

This is a structural converter — it handles static Pug markup, not the template features like mixins, conditionals, loops, or variable interpolation. For those, use the official Pug CLI.

How to Use Pug to HTML Converter

1

Paste Pug template code into the input panel.

2

The HTML equivalent appears instantly on the right.

3

Click Copy or Download .html to use the result.

Common Use Cases

  • Migrating a Pug-based project to a plain HTML setup.
  • Compiling Pug snippets to HTML for inclusion in a non-Pug environment.
  • Learning HTML by seeing how Pug templates translate to markup.
  • Generating an HTML mock from a designer's Pug deliverable.
  • Cross-checking the HTML output of a Pug template without running the Pug CLI.

Example Input and Output

A Pug card component expands to a div with class, an h2, and an anchor.

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

Privacy

All conversion happens in your browser. No Pug or HTML is sent to a server.

Indentation

Use spaces consistently for indentation. Tabs are interpreted as 4 spaces. Mixed indentation may produce unexpected nesting.

Frequently Asked Questions

Are mixins and variables supported?

No. This converter handles static Pug markup only. Mixins, conditionals (if/each/case), variable interpolation (#{var}), and includes are not processed.

What happens with the doctype?

doctype html becomes <!DOCTYPE html>. Other shortcuts (doctype xml, doctype transitional, etc.) emit a generic <!DOCTYPE X> with the value passed through.

How are comments handled?

// comment becomes <!-- comment -->. //- silent comment is dropped from the output, matching standard Pug behaviour.

What is a block literal?

Pug allows tag. (with a trailing dot) followed by indented content that is preserved verbatim. This is typically used for <style>, <script>, or <pre> blocks where you do not want Pug to parse the content.

Related Tools

Part of a Collection