Pug (Jade) to HTML Compiler

Paste your Pug code below and get clean, formatted HTML back instantly, with a live preview of the result. Pug, formerly known as Jade, is compiled by the official Pug compiler, so mixins, loops, conditionals and interpolation all work. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our HTML to Pug Converter.

About Pug to HTML Compiler

Pug, formerly known as Jade, is a templating language for writing HTML with less typing. Instead of opening and closing tags, it uses indentation to show nesting, CSS-style shorthand for classes and IDs, and adds programming features such as variables, loops, conditionals and reusable mixins. Browsers only understand HTML, so Pug has to be compiled before it's used on a website.

Here's a basic example of Pug and the HTML it compiles to:

doctype html
html(lang="en")
  head
    title My Website
  body
    h1.title Welcome to my website
    p This is a paragraph.
    ul
      each item in ["One", "Two"]
        li= item

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1 class="title">Welcome to my website</h1>
    <p>This is a paragraph.</p>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

Features

• The official compiler – everything Pug supports works here, including mixins with blocks and arguments, each and while loops, if/case conditionals, inline JavaScript, interpolation and plain-text blocks.
• Live preview – switch the output between the HTML code and a rendered preview of the page.
• Clean output – choose neatly indented HTML with your preferred indentation, or compact HTML exactly as Pug produces it.
• Clear errors – mistakes such as inconsistent indentation are reported with their line number, and the last successful result stays visible (dimmed) while you fix them.

Because the compiler runs in your browser, include and extends can't load other files – paste their contents in instead. Variables your template expects can be defined at the top with - const name = "value", as in the sample. The preview runs in a sandbox, so scripts in your page won't run.