Micro Tools
Advertisement

Pug to HTML

Paste Pug template code and compile it into plain HTML. Supports tags, #id and .class shorthand, attributes in parentheses, text pipes and indentation based nesting.

Pug to HTML

Paste Pug template code below.

Advertisement

How the conversion works

Each Pug line is parsed for a tag name, #id and .class shorthands, an optional attribute list in parentheses, and trailing text. Indentation builds the element tree, and the tree is serialized back to HTML with proper nesting and escaped text.

A safe way to preview Pug

Compiling Pug to HTML lets you preview a template without installing Node or the Pug package. It is handy for checking a snippet from documentation, a tutorial, or a teammate before dropping it into a real project.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Pug to HTML FAQs

Are mixins and includes supported?
No. This converter handles the core Pug subset: tags, shorthands, attributes, nesting and text. Mixins, includes, conditionals, loops and inline JavaScript are not supported.
How do I add plain text?
Put a space after the tag, like p Hello world, or use a pipe on its own line for longer blocks. Both forms become text inside the element.
How are attributes written?
In parentheses after the tag: a(href="https://example.com" target="_blank") Link. Comma separated attributes with quoted values are parsed correctly.
What if I omit the tag name?
.card on its own becomes a div with class card, matching standard Pug behavior.
Is my template uploaded?
No. Compilation runs entirely in your browser, so your templates never leave your device.
Advertisement