HTML to Pug Converter
Convert HTML markup into Pug (Jade) template syntax for free. Indentation options, class and id shorthand, comment handling — 100% in-browser, no upload.
Loading tool...
What is HTML to Pug Converter?
The HTML to Pug Converter transforms standard HTML markup into Pug (formerly Jade) template syntax. Pug replaces closing tags with indentation, so a full HTML page collapses into a compact, readable template that Node.js frameworks like Express can render directly.
Key Benefits
- Templates shrink by roughly 30-50% because closing tags disappear
- Indentation-based syntax keeps nesting consistent and reviewable
- Class and id attributes become concise shorthand selectors
- Runs fully in the browser — no account, no upload, no limits
- Configurable indentation and comment handling for team conventions
Common Use Cases
- •Migrating legacy HTML views to an Express or NestJS app that renders Pug
- •Converting static HTML mockups into Pug templates for a Node.js backend
- •Learning Pug syntax by seeing how familiar HTML maps to it
- •Cleaning up copy-pasted HTML into consistent, indented templates
- •Preparing email or page templates for Pug-based build pipelines
How to Use HTML to Pug Converter
- Paste your HTML: Paste your HTML markup into the input box, or click Sample to load a demo document.
- Choose formatting options: Pick the indentation style (2 spaces, 4 spaces, or tabs) and toggle class/id shorthand and comment keeping.
- Review the Pug output: The converted Pug appears instantly — nesting, attributes, and comments are preserved in the output panel.
- Copy or download: Click Copy to grab the Pug code, or Download to save it as a .pug file for your project.
Key Features
- Converts nested tags, void elements, and raw script or style blocks accurately
- Pug class and id shorthand by default, with a toggle to keep attributes literal
- Choose 2 spaces, 4 spaces, or tab indentation to match your project style
- Preserves HTML comments as Pug comments — or strips them with one click
- Copy or download the result as a .pug file instantly
- 100% client-side conversion — your HTML never leaves the browser
Frequently Asked Questions
What is Pug and why use it instead of HTML?
Pug (formerly Jade) is a template engine for Node.js that uses indentation instead of closing tags. Templates become shorter, nesting is visually obvious, and you gain features like mixins, includes, and interpolation that plain HTML lacks.
Does the converter handle class and id attributes?
Yes. By default class and id attributes are converted to Pug shorthand syntax such as div#main.card.active. If your team prefers explicit attributes, toggle the options to keep them as literal class and id attributes.
Is my HTML uploaded to a server?
No. The conversion runs entirely in your browser using the built-in DOM parser. Nothing is sent to any server, so it is safe for proprietary or internal markup.
Which HTML features are supported?
Nested tags, void elements like img, br, input and meta, boolean attributes, HTML comments, doctype declaration, and raw script or style blocks. Very old or malformed HTML may produce unexpected nesting.
Can I choose tabs instead of spaces for indentation?
Yes. The tool supports 2 spaces, 4 spaces, and tab indentation. Whichever you pick, the output is consistent throughout the file.