HTML Input

Pug Output

What Is an HTML to Pug Converter?

An HTML to Pug converter transforms standard HTML markup into Pug (formerly Jade) template syntax. Pug is a high-performance template engine for Node.js that replaces verbose HTML with a clean, whitespace-significant syntax: tags without angle brackets, classes using dot notation, IDs using hash notation, and attributes in parentheses.

For example, <div class="hero" id="main"><p>Hello</p></div> becomes div.hero#main p Hello. Pug is widely used with Express.js and other Node.js frameworks. This converter parses your HTML in the browser and outputs valid Pug structure with proper indentation.

How to Convert HTML to Pug

Follow these three steps to transform any HTML into Pug template syntax.

Paste or Upload HTML

Paste your HTML into the left HTML Input panel, or click Upload to load an HTML file. Use Sample to load an example.

View Pug Output

The right Pug Output panel shows the converted Pug template. Classes use dot notation, IDs use hash notation, attributes are in parentheses, and nesting is shown through indentation.

Copy or Download

Click Copy to copy the Pug output to your clipboard, or click Download to save it as a .pug file ready for use in your project.

When to Use an HTML to Pug Converter

Migrating Express.js Projects

When setting up Express.js applications with Pug as the view engine, you need to convert existing HTML templates. This tool automates that conversion so you can focus on logic, not syntax.

Cleaning Up Verbose HTML

Pug's whitespace-significant syntax removes all closing tags and angle brackets, reducing a typical HTML file by 30-50%. This converter shows you exactly what the Pug equivalent looks like.

Learning Pug Syntax

New to Pug? Convert HTML you already know and immediately see the corresponding Pug — the best way to learn the tag, class, id, and attribute patterns.

Prototype Template Generation

Design tools and HTML generators produce HTML output. Use this converter to transform those outputs into Pug templates for use in Node.js view layers.

Common Questions

What is Pug syntax?

Pug uses indentation instead of closing tags. A tag is written as just its name: div. Classes attach with a dot: div.myClass. IDs attach with a hash: div#myId. Attributes go in parentheses: a(href="/"). Text content follows after a space: p Hello World. See the Pug documentation.

Does it handle nested elements?

Yes. The converter recursively walks the DOM and outputs each element at the correct indentation level. Child elements are indented 2 spaces deeper than their parent.

How are attributes handled?

All attributes except class and id are placed in parentheses after the tag name: input(type="text" name="email"). Multiple attributes are separated by spaces.

Is inline text content preserved?

Yes. Text nodes are output as inline content on the same line as their parent tag when the parent has no child elements, and as piped text (| text) when mixed with child elements.

Is my HTML data stored?

No. All conversion happens locally in your browser. Your HTML is never sent to any server.

Related HTML & Template Tools

More tools for working with HTML and converting it to other formats: