About the Pug to HTML Converter
Pug, formerly called Jade, writes HTML with indentation instead of closing tags. This converter reads a Pug template and writes the HTML it stands for: nested tags, #id and .class shortcuts, attributes in brackets, text after a tag or on | lines, inline tags like #[b bold], comments, doctype, and script or style blocks written with a dot. It handles plain templates and snippets. Anything that needs a program to run, such as variables, loops, mixins, includes and JavaScript expressions, cannot be turned into fixed HTML here, so those lines are skipped and listed so you can see exactly what was left out.
Updated October 2026
How to use the Pug to HTML Converter
- 1Paste your Pug in the left box.
- 2Choose how to indent the HTML, or tick Minify for one line.
- 3Read the HTML on the right. A line under it lists anything that was skipped because it needs code.
- 4Copy the HTML or download it as page.html.
A quick example
The Pug below becomes a div with an id and a class, a heading, a paragraph with bold text, and a link with a class.
- #intro.card
- h2 Welcome
- p Read the #[b guide] first.
- a(href='/guide', class='button') Open it
- gives <div id="intro" class="card"> with <h2>Welcome</h2>, <p>Read the <b>guide</b> first.</p> and <a class="button" href="/guide">Open it</a> inside.
What is converted and what is not
Everything that describes fixed markup is converted: tags, nesting, ids, classes, attributes with quoted or numeric values, text, inline tags, comments, doctype and raw blocks. This covers static pages, email templates and most snippets copied from tutorials.
Pug becomes interesting when it has logic, and logic is where a converter has to stop. A line like each item in items produces a different number of elements depending on data, so no single HTML result exists. To see the rendered result of such a template, run it through the Pug package in your project with real data.
Indentation rules to know
Pug uses indentation to decide what is inside what. Use either tabs or spaces in one template, never both: a mix is reported as an error because the structure would be a guess. Lines that are indented deeper than the line above become its children.
For long text in a script or style tag, end the tag with a dot and indent the content underneath. The lines are copied as written, with their relative indentation kept.
Whitespace differences
Pug and HTML treat whitespace between inline elements differently, so the result of this converter shows each piece of text and each tag on its own line. In a browser, a line break between inline tags is displayed as a single space. If spacing between words and links matters in your page, use the Minify option and check the page, or add the spaces yourself.
Phone and computer
The two boxes sit side by side on a computer and stack on a phone. Copy puts the HTML on your clipboard, and Download saves it as page.html.
Moving between Pug and HTML
If you are leaving Pug, convert each template, compare the page in a browser, and then replace the includes and loops with whatever your new system offers. If you are moving to Pug, start with the HTML to Pug converter, then use the HTML tidy-up tool to check the result. Plain HTML is easy to check, and other templates may be needed too. Go back with the HTML to Pug Converter, tidy the output with the Code Beautifier, and preview it with the HTML Viewer.
Features
- Nested tags from indentation, with ids and classes from #id and .class
- Attributes in brackets, including quoted values and bare attributes like disabled
- Text after a tag, | text lines and #[inline tags]
- Comments, doctype and void tags such as img and br
- script. and style. blocks keep their lines as written
- Lines with variables, loops or mixins are skipped and reported, never guessed
Frequently asked questions
What is Pug?
Pug is a template language for Node.js, used with Express and other frameworks. It was named Jade until 2016. Indentation shows which tags sit inside which, so there are no closing tags.
Does it run my JavaScript, variables or loops?
No. Lines such as - var x = 1, if user, each item in list, p= name and mixins need real data and a JavaScript engine to run. They are skipped, and a note tells you the line number and what was left out.
How are classes and ids turned into HTML?
A line starting with .card or #intro becomes a div. Both together, as in #intro.card, give a div with id="intro" and class="card". If a tag has both a shortcut class and a class attribute, they are joined.
What happens to attributes like checked or disabled?
An attribute with no value is written as is, as in <input checked>. A value of true does the same, and a value of false removes the attribute, as Pug does.
Why do some attribute values get dropped?
A value such as href=url is a JavaScript variable, not text. The converter cannot know what url holds, so it leaves the attribute out and says so. Quoted values and plain numbers are kept.
Does it keep comments?
Lines starting with // become HTML comments. Lines starting with //- are silent comments in Pug and are removed, together with the lines indented under them.
Can it convert HTML back to Pug?
Yes, use our HTML to Pug converter. Our BBCode to Pug tool can also turn forum code into a Pug template.
Is my template sent anywhere?
No. The conversion runs in your browser and nothing is uploaded.