HTML to Pug Converter

Convert HTML to Pug (formerly Jade) template syntax — indentation-based, no closing tags.

HTML Input

or drop a file here

Pug Output

doctype html
    meta(charset="UTF-8")
    title
      | My Page
    #wrapper.container.main
      h1.title
        | Hello World
      p.lead
        | Welcome to Pug.
      a.btn.btn-primary(href="/about")
        | Learn more

What is Pug and how does conversion work?

Pug (formerly Jade) is a templating engine for Node.js that uses indentation instead of closing tags, making it concise and readable. Tags are written without angle brackets (div, p), IDs with #, and classes with . syntax. Attributes go in parentheses: a(href="/about"). Text content follows the tag with a | prefix on its own line.

For Ruby templates, see the HTML to HAML Converter. For React, try HTML to JSX.

Built and maintained by Meet Shah · Last updated 9 August 2026

What this tool is used for

Migrating a template from HTML into Pug during a framework change.
Converting a designer's markup into the template syntax a project uses.
Learning Pug's shorthand by seeing your own markup translated.
Producing a starting template you then add interpolation to.
Converting a fragment into a Pug mixin the rest of a template can include.

Frequently Asked Questions

How does Pug differ from Haml?: Same indentation idea, different ecosystem and syntax. Pug is JavaScript/Node, uses plain tag names with no % sigil, and takes attributes in parentheses: a(href='/x'). Haml is Ruby and uses %a{href: '/x'}.
Why was it renamed from Jade?: A trademark dispute in 2015 forced the change at version 2. Old tutorials, Stack Overflow answers and the .jade extension are still widespread, and Jade-era syntax differs enough to break on modern Pug.
How is interpolation written?: #{} for escaped output and !{} for unescaped, which is the dangerous one — unescaped interpolation of user content is a direct XSS vector, exactly as with dangerouslySetInnerHTML.
How does it handle inline text?: With a pipe for plain lines, or a trailing dot for a block of text. Mixed inline markup inside a paragraph is where indentation-based templates are weakest, and Pug is no exception.
Is Pug still worth adopting?: It is in maintenance rather than active growth. JSX, template literals and Astro have taken most new work, and Pug's whitespace sensitivity is a poor fit for pasting designer HTML. Converting AWAY from it is the more common direction now.

Common errors and gotchas

Losing significant whitespace between inline elements, which Pug handles differently and visibly.
Assuming attributes with special characters convert cleanly, since Pug quotes them differently.
Converting markup containing template syntax from another engine, which Pug treats as text.
Expecting the indentation to be forgiving, when Pug treats one space as structural.
Converting a full document and losing the doctype's exact form.