Pug to HTML

Convert Pug (formerly Jade) templates to HTML — tags, classes, IDs, attributes, and text nodes.

Pug Input

or drop a file here

HTML Output

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1 id="main" class="hero">Hello, Pug!</h1>
    <p class="intro">This is a paragraph.</p>
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>
    <a href="https://pugjs.org" target="_blank">Pug docs</a>
    <input type="text" placeholder="Enter text" />
  </body>
</html>

What is Pug (formerly Jade)?

Pug is a high-performance template engine for Node.js inspired by HAML. It eliminates closing tags and angle brackets — h1.title Hello becomes <h1 class="title">Hello</h1>. Popular in Express.js apps, Pug supports mixins, loops, and conditionals. This converter handles static Pug structure: tags, classes, IDs, parentheses-style attributes, and text nodes. Dynamic features (=, -, each, mixins) are shown as HTML comments.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Understanding an existing Pug template by seeing the markup it produces.
Migrating a template off Pug onto plain HTML.
Debugging nesting where indentation has gone wrong.
Checking what a Pug attribute block generates when it mixes literals and expressions.
Checking what a Pug shorthand actually generates.

Frequently Asked Questions

How does Pug express nesting?: By indentation alone — there are no closing tags at all. A child element is simply indented under its parent, which makes the document structure visible in its shape and makes a misplaced indent a structural change rather than a cosmetic one.
What is the shorthand for classes and IDs?: CSS-style: `h1.hero#main` is `<h1 class="hero" id="main">`. A bare `.card` with no tag name defaults to a div, which is why idiomatic Pug contains almost no explicit divs and reads much closer to a stylesheet than to HTML.
Why was it renamed from Jade?: A trademark claim in 2016 forced the rename. The syntax was unchanged, so old Jade files are valid Pug — but the package name, the CLI and the file extension all moved, which is why tutorials from before then reference a package that no longer exists.
How is interpolation written?: `#{expression}` inside text, and `= expression` for an element's entire content. The distinction matters for escaping: both escape HTML by default, and `!=` is the explicitly unescaped form — which is the one to audit whenever user data is involved.
Is Pug still worth using?: In existing Express and Node projects, yes, and the terseness is genuine. New work has largely moved to component frameworks where markup and logic are colocated, so converting Pug to HTML is most often the first step in migrating away from it.

Common errors and gotchas

Mixing tabs and spaces, which Pug treats as a structural error.
Expecting interpolation and mixins to resolve, which need the runtime rather than a static conversion.
Losing filters and included files, which are resolved at build time.
Assuming a bare dot block is text, when Pug treats the following lines as unescaped content.
Assuming the output is the final markup, when a layout template usually wraps it.