HTML to JADE

Convert standard HTML markup into compact Jade/Pug template syntax.

100% Client-Side Local Execution

Upload Data

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 class="title">Hello World</h1>
    <p class="intro">Welcome to <strong>WarpTool</strong></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 class="title">Hello World</h1>
    <p class="intro">Welcome to <strong>WarpTool</strong></p>
  </body>
</html>

html
  head
    title
      | My Page
  body
    h1.title
      | Hello World
    p.intro
      | Welcome to
      strong
        | WarpTool

html
  head
    title
      | My Page
  body
    h1.title
      | Hello World
    p.intro
      | Welcome to
      strong
        | WarpTool

What is HTML to JADE?

This tool converts standard HTML markup into compact Pug (formerly Jade) template syntax, stripping closing tags and converting attributes into Pug's shorthand notation. It's useful when migrating an existing HTML template into a Node.js/Express project that uses Pug as its view engine — an html to pug conversion that would otherwise mean rewriting markup by hand.

Technical Execution

The tool parses the HTML into a DOM tree, then walks that tree converting each element into Pug's indentation-based syntax: closing tags are dropped since Pug infers nesting from indentation, and common attribute patterns like class and id are converted into Pug's dot and hash shorthand.

Zero Data Storage Guarantee

Conversion happens entirely client-side, so the HTML markup you're migrating — which may be a proprietary template or client project — is never uploaded to a server.

How to Use HTML to JADE (Step-by-Step Guide)

Paste your standard HTML markup into the input panel
The converted Pug/Jade template syntax appears automatically
Review the output for correct indentation and shorthand conversion
Copy the Pug template code to your clipboard
Drop it into your Pug-based view templates

Frequently Asked Questions (FAQ)

Q: Does this convert HTML to Pug or to the older Jade syntax?

A: The output uses modern Pug syntax, which is what the templating engine has been called since it was renamed from Jade; the syntax itself is unchanged, so it's fully compatible with projects still referring to it as Jade.

Q: Can I convert HTML to Pug online without a build setup?

A: Yes, the conversion runs entirely in the browser, no Node.js project or Pug CLI installation required.

Q: Does it convert HTML classes and IDs to Pug shorthand?

A: Yes, class="foo" and id="bar" attributes are converted to Pug's .foo and #bar shorthand notation where applicable.

Q: What happens to self-closing tags like <img> or <br>?

A: They're converted to their Pug equivalent, which also omits the closing slash and relies on Pug's own handling of void elements.

Q: Does it handle inline styles and other HTML attributes?

A: Yes, standard attributes are converted into Pug's attribute syntax (tag(attr="value")) alongside the shorthand for class and id.

Q: Is html2pug conversion accurate for complex nested markup?

A: It handles standard nested HTML structures reliably; very unusual or deeply irregular markup may need minor manual cleanup after conversion.

Q: Why would I migrate HTML to Pug templates today?

A: Teams maintaining existing Express/Node.js applications that use Pug as the view engine often need to port static HTML mockups or exported markup into that template format.

Q: Can I convert the Pug output back to HTML?

A: Yes, use the companion Jade/Pug to HTML converter for the reverse direction.

Report an issue with this tool