Micro Tools
Advertisement

HTML to Pug

Paste HTML and convert it into Pug template syntax with proper indentation. IDs become #id shorthand, classes become .class shorthand, attributes are preserved and text content is inlined.

HTML to Pug

Paste HTML markup below.

Advertisement

How the conversion works

Your HTML is parsed into a DOM-like tree, then each element is emitted as a Pug line: the tag name, #id and .class shorthands, remaining attributes in parentheses, and child elements indented by two spaces. Text-only elements are inlined after the tag, and mixed content uses the pipe syntax.

Why teams switch to Pug

Pug removes closing tags and angle brackets, which makes deeply nested layouts dramatically shorter. Converting an existing HTML snippet is the fastest way to try Pug in an Express or static site project without rewriting markup by hand.

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.

HTML to Pug FAQs

Are HTML comments kept?
No. Comments are dropped during parsing because Pug comments use a different syntax. Copy any important comments manually into the Pug output.
What happens to pre and textarea content?
Whitespace inside pre and textarea is normalized like other text, which can change rendering. Check those elements after conversion and restore significant whitespace by hand if needed.
Are data attributes preserved?
Yes. Attributes like data-id="5" are emitted inside the parentheses as data-id="5", so JavaScript hooks and test selectors keep working.
Does it handle full HTML documents?
Yes. The converter looks for the body element and converts its children, skipping head content like meta tags and stylesheets that do not belong in a Pug template.
Is my markup uploaded?
No. Parsing and conversion run entirely in your browser, so proprietary templates never leave your device.
Advertisement