← All tools
// Code

HTML to Jade Converter online

Convert HTML to Jade/Pug template syntax instantly — no upload, no sign-up

HTML to Jade mascot
by
CHUNKY
MUNSTER

How to Convert HTML to Jade/Pug

  1. Paste your HTML markup into the input box above.
  2. The HTML to Jade converter parses it instantly and prints Pug syntax in the output box.
  3. Toggle "Omit div tag" or "Single-quote attributes" to match your project's Pug style.
  4. Copy the converted Jade/Pug template straight into your project.

HTML to Jade Converter (Jade is now called Pug) rewrites angle-bracket HTML as whitespace-indented Pug syntax in your browser, with no upload and no server round-trip. It collapses div tags into .class/#id shorthand where possible, keeps other attributes in parentheses, and preserves nested structure and inline text so the resulting Pug template compiles back to equivalent HTML.

Why Use a Jade/Pug Converter

Teams migrating an Express.js or Node.js view layer from raw HTML templates to Pug often have dozens of existing pages to convert by hand. Running each file through this html to pug converter turns that manual, error-prone rewrite into a one-paste operation, correctly handling void elements, comments, and attribute lists so the migrated Pug template engine markup keeps the same DOM output.

About HTML to Jade/Pug

What is Jade / Pug?

Pug (formerly Jade) is a whitespace-sensitive HTML template language. Instead of angle brackets you write tag names with attributes in parentheses and nest children using indentation. It compiles to standard HTML.

What is the class/ID shorthand?

In Pug, .foo is shorthand for div(class="foo") and #bar is shorthand for div(id="bar"). Combined: .card#main = div(class="card" id="main").

Does this convert Pug back to HTML?

No — this tool converts HTML → Pug only. Compiling Pug → HTML requires the Node.js Pug compiler. Run it locally with npx pug --pretty file.pug.

Why was Jade renamed to Pug?

"Jade" was trademarked by another software company, so the project was renamed to Pug in 2016. The syntax is identical.

Whether you're migrating a legacy Express app to a Pug template engine or just want to see how a chunk of markup looks in Jade/Pug syntax, this free HTML to Jade converter gives you an instant, accurate conversion with zero setup. Bookmark this html to pug converter alongside the JS Prettifier and JSON Validator for your everyday Node.js template work.