HTML to Jade Converter Online — HTML to Pug

Transform standard HTML markup into Pug/Jade indent-based template syntax. Collapse class= and id= into shorthand, drop closing tags, and produce concise template code. 100% in your browser.

Input HTML

Pug/Jade Output

What is an HTML to Jade Converter?

An HTML to Jade converter emits Pug/Jade indent-based template syntax from standard HTML markup. Closing tags disappear, indentation replaces nesting, class="card" collapses to .card, and id="hero" collapses to #hero. The output is typically 30–50% fewer lines than the original HTML.

Pug (formerly Jade) is the standard template language of the Express ecosystem and is supported natively by Eleventy, Vite plugins, and many Node.js static-site generators. Teams migrating from raw HTML to a Pug-based stack typically start by converting their existing pages — that is exactly the workflow this converter automates. Paste HTML, copy Pug, save as .pug, done.

How to convert HTML to Jade — 4 steps

Paste your HTML. Drop in any HTML — a full document, a fragment, or a single component. Click Load Sample to see a demo conversion.
Click Convert. The browser DOMParser parses the HTML and the converter walks the DOM tree, emitting Pug indent syntax.
Inspect the Pug. Verify class/id collapsed into shorthand, attribute lists in parens, and the indentation matching DOM nesting.
Save as a Pug file. Copy the output and save with a .pug extension in your Express, Eleventy, or Vite project — ready to render.

Sample transformation

HTML input

<nav class="topnav">
  <a href="/" class="logo">Home</a>
  <ul class="links">
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Pug output

nav.topnav
  a.logo(href="/") Home
  ul.links
    li
      a(href="/about") About
    li
      a(href="/blog") Blog

Notice the dropped closing tags, class= collapsed to ., and href= moved into a parenthesised attribute list — concise, readable, and ready for any Pug build pipeline.

DOM-Based Parsing

Uses the browser’s built-in DOMParser so malformed but browser-tolerated HTML (unclosed <p>, missing </li>) is handled the same way the browser handles it.

Shorthand Collapse

class="card" becomes .card, id="hero" becomes #hero, and div tags with shorthand drop the div entirely — the cleanest possible Pug output.

Client-Side Only

HTML is parsed and converted in JavaScript inside your browser. Internal copy, unreleased designs, and customer data never leave the device.

Common use cases

check_circleMigrating an existing HTML site to a Pug-based Express, Eleventy, or Vite project
check_circleConverting HTML mockups from designers into Pug templates for component libraries
check_circleTransforming static HTML email templates to Pug for programmatic composition
check_circleReducing line count of long HTML pages by switching to Pug shorthand
check_circleLearning Pug by seeing your familiar HTML translated automatically
check_circleBulk-converting partials when adopting Pug across an existing codebase
check_circleGenerating Pug starting points for new components based on rendered HTML inspiration
check_circleConverting CMS-rendered HTML back into editable Pug source for re-authoring

HTML vs Pug: when to convert

Pug shines for authoring — it removes the visual noise of closing tags and lets nesting speak for itself. For long pages with deep DOM trees, the readability gain is substantial. Conversion is one-way in practice: once a team is on Pug, Pug becomes the source of truth and HTML is just compile output. This converter exists for that one-time migration moment — paste your existing HTML, get the Pug, commit it, never look back.

More HTML tooling

Format, validate, view, and convert HTML with the rest of OpenFormatter's toolkit — all browser-side.

Jade to HTML HTML Formatter HTML Validator

Frequently Asked Questions

Why convert HTML to Jade in the first place?

Pug is significantly more concise than HTML — typically 30–50% fewer lines because closing tags disappear and class/id become single-character shorthand. Teams migrating to a Pug-based stack (Express, Eleventy, Vite plugins) usually start by converting their existing HTML, then maintain only the Pug source going forward.

Does the output use Jade or Pug syntax?

They are the same language — Jade was renamed to Pug in 2016 after a trademark dispute. The output works identically with the jade or pug npm package, with Eleventy, with Vite Pug plugins, and with any tooling that accepts Pug indent-based templates.

How are class and id attributes converted?

class="card primary" becomes .card.primary, id="hero" becomes #hero, and combining both produces #hero.card.primary. Other attributes remain in parenthesised lists: (href="/x", target="_blank"). When the tag is div, the converter omits div entirely — .card by itself is a div.

Is the output exactly equivalent to my HTML?

Compiled back, the Pug produces semantically identical HTML. Some cosmetic differences may appear: attribute order can differ, void elements like <br> are emitted as br, and HTML entities may be normalised. Run the output through pug --pretty to see the round-trip result.

Will inline style and script blocks be preserved?

Yes. Pug uses dot-block syntax (style. and script.) to embed raw content. The converter outputs the children as a text block — open the result and you will see your CSS or JS verbatim under a script. or style. parent.

Why does the converter use the browser DOM parser?

The browser already ships a battle-tested HTML parser (DOMParser). Using it means malformed but browser-tolerated HTML — unclosed <p>, <li> without </li>, attributes with no quotes — is handled the same way the browser handles it, instead of erroring out on a strict regex.

Is my HTML uploaded to your servers?

No. Conversion uses the browser DOMParser and runs entirely in JavaScript on your device. HTML containing internal copy, customer data, or unreleased layouts never leaves your machine. DevTools Network tab confirms zero requests on click.

Can I use the Pug output with Eleventy or a Vite plugin?

Yes. Eleventy supports Pug as a first-class template language (set the .pug extension), and Vite/Webpack both have community Pug plugins. The output of this converter is plain Pug — no special directives — so it drops into any Pug-aware build pipeline without modification.