Pug to HTML Compiler

Compile Pug to HTML without Node.js

Pug is normally compiled on the server or during a build. When you only want to see what a template produces, check a snippet from documentation, or convert a Pug file into plain HTML for a project that does not use Pug, this Pug to HTML converter does it in the browser with no installation.

Example

doctype html
html(lang="en")
  head
    meta(charset="utf-8")
    title My Pug Page
  body
    //- this comment is not rendered
    header#top.site-header
      h1 Welcome, #[em friend]!
      a.button(href="/start", target="_blank") Get started
    p.
      Block text keeps
      several lines together.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Pug Page</title>
  </head>
  <body>
    <header class="site-header" id="top">
      <h1>Welcome, <em>friend</em>!</h1><a class="button" href="/start" target="_blank">Get started</a>
    </header>
    <p>Block text keeps several lines together.</p>
  </body>
</html>

The pretty printer keeps inline elements such as links next to their neighbors and joins block text into a single line. Both render exactly the same in a browser as the multi-line form.

Supported Pug syntax

• Tags, nesting by indentation and block expansion (li: a(href="/") Home).
• #id and .class shortcuts, with div implied when the tag is omitted.
• Attributes in parentheses, separated by commas or spaces, including boolean attributes and static object or array values for class and style.
• Piped text (| text), block text with a trailing dot (p.) and inline HTML lines.
• Interpolation with static values: #{"text"} (escaped), !{"<b>raw</b>"} (unescaped) and tag interpolation #[strong bold].
• Buffered comments // (output as HTML comments) and unbuffered comments //- (removed).
• doctype shortcuts such as html, xml, strict and transitional.

What is not supported

This is a static compiler: it converts markup, but it does not execute JavaScript. Lines that need runtime data or other files produce a clear error with the line number:

• Code lines (- var x = 1) and buffered expressions that reference variables (= user.name).
• Conditionals and loops: if, unless, each, while, case.
• Mixins (mixin, +button), include, extends and block.
• Filters such as :markdown.

Literal values are fine, so = "Hello" and #{'2026'} work. For templates full of logic, compile them with the official pug package in Node.js, where your data is available.

Common errors

• Inconsistent indentation – mixing tabs and spaces, or indenting a child by a different amount than its siblings, changes the nesting. Pick one style per file.
• Text on the next line – text placed on its own line under a tag needs a pipe (| text); otherwise Pug treats the first word as a tag name.
• Unclosed parentheses – long attribute lists may span lines, but every ( needs its ).

Related tools

Convert in the opposite direction with HTML to Pug, preview the compiled page in the HTML viewer, or tidy the output further with the HTML formatter. Templates are compiled locally and never uploaded.