HTML to Pug Converter
Paste raw HTML to instantly convert it into Pug's indentation-based template syntax, with classes and IDs collapsed into shorthand notation. Free online developer tool.
Paste HTML Markup
Pug Output
Pug template will appear here...
Free HTML to Pug Converter
Paste raw HTML to instantly convert it into Pug's indentation-based template syntax. Classes and IDs collapse into the shorthand tag.class#id notation, remaining attributes move into parentheses, and void elements like <input> need no closing tag.
How to Use It
Paste any HTML snippet into the input box, or click "Load Example". The tool parses the markup and walks the element tree, emitting one indented line per element. Short single-line text content stays on the same line as its tag; longer or multi-line text is placed on its own indented | line below, and HTML comments become Pug // comment lines.
Example
<div class="form-group"> becomes div.form-group, and<input id="email" type="email" placeholder="you@example.com"> becomesinput#email(type="email", placeholder="you@example.com") — no closing tag needed.
Common Use Cases
- Migrating a static HTML template into an Express/Pug (formerly Jade) view.
- Converting a designer's HTML mockup into the templating syntax your backend already uses.
- Learning Pug syntax by comparing it side-by-side against familiar HTML.
FAQs
How are multiple classes handled?
Every class in a space-separated class attribute becomes its own chained shorthand, soclass="card card--large" becomes .card.card--large appended directly after the tag name.
What happens to attributes with no value, like "disabled"?
This converter reads attribute values as reported by the browser's DOM parser, so boolean HTML attributes are emitted with their resolved value (e.g. disabled="") inside the parentheses — you can trim the ="" by hand if your Pug setup prefers the bare form.
Is my HTML uploaded anywhere?
No — parsing and conversion happen entirely client-side in your browser. Nothing you paste is sent to a server.