Pug to HTML / HTML to Pug

Convert Pug templates to HTML and HTML to Pug in both directions.

0 chars
0 words
0 lines
0 chars
0 words
0 lines

Pug to HTML and HTML to Pug Converter

Pug (formerly Jade) is a whitespace-sensitive template language used with Express, Vite, Eleventy and many static site generators. Instead of opening and closing tags it uses indentation, which makes templates short but means you cannot paste Pug directly into a CMS, an email builder or a plain HTML file. This free converter works in both directions: paste Pug to get formatted HTML, or switch the mode and turn existing HTML into a clean Pug template.

Supported Pug syntax

  • Tags and nesting by indentation – ul followed by indented li lines.
  • Shorthand – #main.container.wide becomes <div id="main" class="container wide">.
  • Attributes – a(href="/x" target='_blank'), comma or space separated, boolean attributes such as required and hidden, and false values that are dropped.
  • Text – inline text, piped text (| text), block text with a trailing dot (script. or p.) and literal HTML lines starting with <.
  • Block expansion – li: a(href="/") Home nests elements on one line.
  • Comments – // visible becomes an HTML comment, //- silent comments are removed.
  • Doctype – doctype html and the classic XHTML doctypes.

Converting HTML to Pug

In the reverse direction the HTML is parsed into a tree and written back with two- or four-space indentation. Short text stays on the same line as its tag, longer mixed content uses piped text, and script, style and pre blocks use Pug's dot syntax so their content is copied verbatim. This is handy when you migrate a theme or a landing page into an Express or Vite project.

Tips

Indent with spaces consistently; mixing tabs and spaces is the most common reason a Pug file does not compile. Format the HTML result with the HTML Beautifier or preview it in the HTML Viewer. Working with older projects? The Jade to HTML converter handles the same syntax under its original name.

Frequently Asked Questions

No. The converter works on markup only, so it does not execute JavaScript. Lines such as - var x = 1, each, if, mixin or include are skipped and listed in an HTML comment at the end of the output so you know what needs a real Pug runtime.

Interpolations are kept literally, for example Hello #{name}. That makes the output a good starting point for another template engine, or you can replace the placeholders by hand.

In Pug a div is implied when a line starts with an id or class shorthand. The converter uses that shorthand for shorter, more idiomatic templates; classes with characters Pug cannot express (like md:flex) stay in the attribute list.

No. Parsing and conversion happen entirely in your browser, so private templates never leave your computer.