HTML to Pug Converter

Paste your HTML below, a snippet or a whole page, and get clean, idiomatic Pug (formerly Jade) back instantly. Classes and IDs use Pug's shorthand, inline tags stay on the same line as their text, and scripts, styles and preformatted text are kept exactly. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our Pug to HTML Compiler.

About HTML to Pug Converter

Pug, formerly known as Jade, is a templating language that describes HTML with indentation instead of closing tags, and uses CSS-style shorthand for classes and IDs. It's popular with Node.js frameworks such as Express. Converting existing HTML to Pug is the quickest way to start using it, whether you're moving a static site to templates or turning a design into reusable components.

Here's an example of HTML and the Pug this tool produces from it:

<div class="card">
  <h2 id="title">Welcome</h2>
  <p>Read the <a href="/docs">docs</a> first.</p>
  <ul>
    <li><a href="/start">Start</a></li>
    <li><a href="/faq">FAQ</a></li>
  </ul>
  <button class="btn" disabled>Save</button>
</div>

.card
  h2#title Welcome
  p Read the #[a(href="/docs") docs] first.
  ul
    li: a(href="/start") Start
    li: a(href="/faq") FAQ
  button.btn(disabled) Save

Features

• Idiomatic Pug – .class and #id shorthand, div left out when it's implied, boolean attributes such as disabled written on their own, and block expansion (li: a) for single inline children.
• Text stays readable – inline tags are written as #[strong text], so sentences stay on one line and the spaces between words are kept. Turn off Inline tags to put every tag on its own line instead.
• Nothing breaks – <script>, <style> and <pre> content is kept exactly in Pug text blocks, characters like < and & are encoded, and text that looks like Pug interpolation (#{…}) is escaped.
• Snippets or full pages – paste a fragment and you get just that fragment; paste a whole page and you get the doctype, head and body too. Classes Pug's shorthand can't express, such as md:flex, go into a class attribute automatically.