About the HTML to Pug Converter
Pug, formerly called Jade, is a template language for Node.js that replaces closing tags with indentation. Rewriting HTML by hand is tedious, so this converter does it for you. Tags become indented lines, ids and classes become #id and .class shorthand, other attributes go in brackets, text sits after the tag or on | lines, comments become // comments, and script and style blocks keep their content with Pug's dot syntax. Choose two spaces, four spaces or tabs. Conversion happens instantly in your browser.
Updated October 2026
How to use the HTML to Pug Converter
- 1Paste your HTML in the left box.
- 2Choose how to indent.
- 3Choose whether to use .class and #id shorthand.
- 4Check the Pug on the right.
- 5Copy it or download it as template.pug.
A quick example
The HTML <div class="card" id="intro"><h2>Welcome</h2><p>Read the <a href="/guide">guide</a> first.</p></div> becomes the Pug below.
- #intro.card
- h2 Welcome
- p
- | Read the
- a(href='/guide') guide
- | first.
Moving a project to Pug
Convert one template at a time and compare the rendered pages before and after. Then replace repeated sections with Pug features such as includes, mixins and loops, which is where Pug saves the most work. The converter gives you a correct starting point, but structure decisions like that are yours.
Indentation rules
Pug uses indentation to decide what is inside what, so be consistent: don't mix tabs and spaces in one file. The converter uses your chosen indent everywhere, including inside script blocks.
Limits
The converter is designed for templates and snippets. Very unusual HTML, such as unclosed tags that browsers fix silently, is converted the way it is written, so tidy such pages first with our Code Beautifier.
Attributes and special values
Attribute values are written in single quotes, switching to double quotes when the value itself contains a single quote. Attributes without a value, such as disabled or required, are written on their own, as Pug expects. Data and ARIA attributes are kept exactly, so accessibility labels and test hooks survive the conversion.
Phone and computer
The two boxes stack on a phone. Use Download to save a .pug file straight into your project. To see the page first use HTML Viewer, and to get plain text use HTML to Text Converter.
Features
- Ids and classes as #id and .class
- Attributes in Pug's bracket syntax
- Script, style and pre content kept with dot blocks
- Comments and doctype converted
- Spaces or tabs
- Escapes Pug interpolation in text
Frequently asked questions
What is Pug?
A whitespace-sensitive template engine for Node.js, used with Express and other frameworks. It was called Jade until 2016, when the name changed for trademark reasons.
How are classes converted?
<div class="card big"> becomes .card.big, because Pug assumes div when a line starts with a class or id. Other tags keep their name, like p.intro.
What happens to text mixed with tags?
When an element contains only text, it stays on the same line as the tag. When text and tags are mixed, each text part goes on its own | line in the right order.
Does it convert JavaScript in the page?
Script and style contents are copied unchanged inside a dot block (script.), which is how Pug includes raw text.
Why is #{ escaped in the output?
Pug treats #{…} as code to run. Text from your HTML that looks like that is escaped so it appears literally, as it did in the HTML.
Will the Pug render exactly the same HTML?
For normal markup, yes, apart from whitespace between tags, which Pug handles differently. Check pages that depend on spaces between inline elements.
Can I convert Pug back to HTML?
Pug templates usually contain variables and logic, so they need the Pug compiler to render. Run pug in your project or use its command-line tool to see the HTML.
Does it keep comments?
Yes. HTML comments become Pug // comments, which Pug outputs into the HTML. Change them to //- if you want them hidden from the rendered page.