HTML to PUG Converter

Convert HTML to clean Pug (Jade) template syntax — paste, convert, and copy instantly.

Input HTML
Output Pug
Converted Pug will appear here...
info

About HTML to PUG Converter

Pug (formerly known as Jade) is a high-performance template engine for Node.js and Express applications. It uses indentation-based syntax instead of closing tags, resulting in cleaner, more readable code. Converting existing HTML to Pug is a common need when migrating projects or adopting Pug in your workflow, and this tool makes that process effortless.

This converter runs entirely in your browser using the native DOMParser API — no data is ever sent to a server. It supports fragment mode to convert HTML snippets without wrapping them in a full document structure, handles attributes, IDs, classes (with Pug shorthand syntax), nested elements, comments, and self-closing tags. Your code stays private and the conversion is instant.

help

How to Use

01

Paste HTML

Copy your HTML code and paste it into the left input pane.

02

Convert

Click "Convert" to transform your HTML into Pug template syntax.

03

Copy Result

Use the copy button to grab your Pug output.

quiz

Frequently Asked Questions

What is HTML to PUG Converter? expand_more
HTML to PUG Converter is a free online tool that transforms HTML markup into Pug (formerly Jade) template syntax. Pug is a popular template engine used with Node.js and Express that uses indentation instead of closing tags for a cleaner, more concise syntax.
What is fragment mode? expand_more
Fragment mode skips the outer html and body wrapper elements and only converts the inner content. This is useful when you are converting HTML snippets or partial templates rather than full HTML documents. Fragment mode is enabled by default.
Is my data secure? expand_more
Yes. All conversion happens entirely in your browser using JavaScript. No data is sent to any server, ensuring your HTML code remains completely private and secure.
Does it handle CSS classes and IDs? expand_more
Yes. The converter uses Pug shorthand notation for IDs and classes. For example, <div id="main" class="container active"> becomes #main.container.active, and the div tag name is omitted when an ID or class is present.
What HTML elements are supported? expand_more
All standard HTML elements are supported, including nested elements, attributes, comments, text content, and self-closing tags like img, br, hr, input, meta, and link. The tool preserves attribute values and converts them to Pug parenthesized syntax.