Skip to content
ToolQivo

HTML to Pug Converter

Turn HTML into Pug templates — shorthand classes and ids, indentation, no closing tags.

Converters Reviews Free · no sign-up

Drop an HTML file here, or click to choose one

Converted on your device — the file is never uploaded

Pug

Quick Tool Overview

The HTML to Pug Converter rewrites markup as Pug templates, using the shorthand for classes and ids, keeping attributes and comments, and leaving script and style contents untouched.

What it does
Converts HTML into Pug templates
You give it
A page, component or fragment
You get back
Indented Pug, no closing tags
Best for
Moving a project onto Pug templates
Converters Free, unlimited use No sign-up Runs in your browser

About the HTML to Pug Converter

Pug templates are HTML with the noise removed: no angle brackets, no closing tags, structure by indentation. Moving an existing page over means rewriting every element, which is exactly the sort of mechanical work worth handing to a tool.

Paste HTML and get Pug. Classes and ids become the shorthand Pug exists for — div.card#intro, and a div with a class drops the tag name entirely — while attributes that cannot be shortened are kept in brackets, properly quoted. Short text sits on the same line as its tag, longer text becomes a piped block, comments are kept, and script and style contents are preserved verbatim so nothing inside them is reformatted. The browser’s own parser reads the markup, so even sloppy HTML converts the way a browser would understand it.

Key features of the HTML to Pug Converter

Shorthand where it fits

div.card#intro, and a div with a class drops the tag name entirely.

Attributes preserved

Data attributes and awkward names are quoted correctly in brackets.

Code left alone

Script and style blocks keep their contents exactly as written.

Real HTML parsing

The browser’s own parser handles unclosed and sloppy markup.

Comments kept

HTML comments become Pug comments, or can be dropped.

How to use the HTML to Pug Converter

  1. 1

    Paste or drop your HTML

    A page, a component, or a fragment.

  2. 2

    Choose the indentation

    Two spaces, four spaces or tabs.

  3. 3

    Decide about comments

    Keep them as Pug comments, or leave them out.

  4. 4

    Copy the Pug

    Paste it into your template and carry on from there.

Frequently asked questions

None, historically — Jade was renamed Pug in 2016 after a trademark dispute. The output here works with Pug 2 and 3.

Reviews of the HTML to Pug Converter

What people who use the HTML to Pug Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HTML to Pug Converter. It takes half a minute and no account.

Write the first review

More converters