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

Pug Input

HTML Output

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, Pug!</title>
<meta charset="UTF-8">
<body>
<h1 id="title">Welcome</h1>
<div class="container">
<p>This is a paragraph with a</p>
<a href="https://example.com">link inside it.</a>
<ul class="items">
<li>First</li>
<li>Second</li>
<li>Third</li>
<img src="photo.jpg" alt="A photo">
</ul>
</div>
</body>
</head>
</html>

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

Paste Pug template code into the input panel.

The HTML equivalent appears instantly on the right.

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