Jade / Pug to HTML Converter

Paste a Jade / Pug template and get the compiled HTML — tag shorthands, attribute lists, pipe text, and comments are all handled, with indentation controlled by you.

Last updated: May 27, 2026

Indent:

Self-closing slash for void tags

Jade / Pug Input

HTML Output

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 class="title">Welcome</h1>
    <nav id="main">
      <ul>
        <li>
          <a href="/home">Home</a>
        </li>
        <li>
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
    <p>
      Hello,
      <strong>world</strong>
      !
    </p>
    <img src="/logo.png" alt="Logo">
  </body>
</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 Jade / Pug to HTML Converter?

Jade (now called Pug) is a templating language for HTML that uses indentation instead of closing tags, and provides shortcuts like `.classname` and `#id` to make markup terser. It was widely used in Node.js projects (Express was once shipped with Jade) and is still common in legacy codebases.

This tool reads Jade / Pug source and emits HTML by parsing the indentation-based tree, expanding the tag shorthands, merging classes from selectors and attribute lists, and recognising the most common Jade constructs: doctype, comments (`//` and `//-`), pipe text (`| text`), inline text, and attribute lists. It does not execute Jade expressions or includes — only the structural syntax.

How to Use Jade / Pug to HTML Converter

Paste Jade / Pug source into the left panel.

Pick the output indent (2 or 4 spaces).

Toggle the self-closing slash if you want XHTML-style output.

Copy the generated HTML.

Common Use Cases

Compiling a Jade template to HTML for a static site or one-off snippet.
Reviewing Pug output without running a Node.js build.
Migrating Jade source files to plain HTML or React JSX (combine with HTML to JSX).
Quick prototyping with terse markup that compiles to standard HTML.

Example Input and Output

A short Jade template becomes equivalent HTML.

Jade input

h1.title Welcome
ul
  li
    a(href='/home') Home

HTML output

<h1 class="title">Welcome</h1>
<ul>
  <li>
    <a href="/home">Home</a>
  </li>
</ul>

Privacy

All Jade parsing and HTML generation happen in your browser. No content is sent to a server.

Round-trip

Use the HTML to Jade tool to go the other direction. Round-tripping is approximate because some Jade constructs (mixins, includes) have no HTML equivalent.

Frequently Asked Questions

Does this support Pug interpolation or mixins?

No. The tool focuses on static markup — Jade expressions, code blocks, mixins, and includes are not interpreted. Run a Pug build to evaluate those constructs.

What about block comments?

Lines starting with // become HTML comments. Lines starting with //- are suppressed (Pug "buffered" vs "unbuffered" comments). Multi-line indented block comments are wrapped in a single HTML comment.

Are tabs allowed for indentation?

Yes. Tabs are normalized to two-space indentation when computing the tree, so mixing tabs and spaces still works as long as each line is consistent.

Does this send my template anywhere?

No. All parsing happens locally in your browser.