CodesBeautify

Pug to HTML Compiler

Compile a static Pug template into readable HTML without installing a build chain.

Pug
HTML
Runs locally in your browser

About the Pug to HTML Compiler

This compiler reads the static half of the Pug language, which is the half that describes markup. Indentation sets the tree, so two spaces in means one element deeper. It understands tag names, #id and .class shorthand, parenthesised attribute lists with single or double quoted values, bare boolean attributes, the trailing slash that forces a self closing tag, piped | text lines, block text after a trailing dot, doctype html, and both comment forms, where // becomes a real HTML comment and //- disappears.

The dynamic half is deliberately out of scope. Loops, conditionals, mixins, includes, extends and buffered code all need a JavaScript runtime and a file system, neither of which exists on a static page. When one of those keywords appears, the compiler stops and tells you which line to look at rather than guessing and producing markup that quietly differs from what your build would emit. Interpolation such as #{title} is left in the text as written, so you can see where a value would land.

Attribute values are escaped on the way out, so a quote inside a title attribute cannot break the tag. Mixing tabs and spaces on the same indentation is rejected with the line number, because that is the single most common reason a Pug file compiles differently on two machines. Untick the indent option for a single line of output. To go the other way, HTML to Pug rewrites existing markup as a template.

How to use

  1. Paste a static Pug template, or drop a .pug file onto the left pane.
  2. Keep the indent matching the file. Pug decides nesting from indentation alone.
  3. Read the compiled HTML on the right, then copy or download it.

Common questions

Why does it refuse my each loop?
Loops, conditionals and mixins need a JavaScript runtime with your data in it. This page compiles static markup only, so remove or expand those blocks first.
Are interpolations such as #{name} replaced?
No. They are copied through as literal text so you can see exactly where a value would be inserted at build time.
Does it support block text after a dot?
Yes. Everything indented under a tag ending in a dot is treated as raw text, which is how script and style blocks are usually written.
My file compiled elsewhere but fails here. Why?
The most likely cause is mixed tabs and spaces in the indentation, which is rejected with a line number. The other cause is a logic keyword that this static compiler does not implement.