HTML to Jade
Convert HTML into Jade/Pug template syntax. It runs entirely on your device — nothing is uploaded.
Example
Input
<a href="/" class="brand">Home</a>
Output
a.brand(href="/") Home
How it works
The converter walks your HTML and emits the equivalent indentation-based Jade/Pug, mapping ids and classes to selector shorthand. It covers the common subset of Pug.
Good to know
HTML to Jade converts ordinary HTML markup into the indentation-based Jade/Pug template syntax, where nesting is expressed by whitespace instead of opening and closing tags, and ids and classes collapse into CSS-style selector shorthand. It's aimed at developers who are migrating an existing site or component library into a Pug-based stack (Express views, static-site generators, or build pipelines that compile .pug files) and don't want to retype every element by hand.
Reach for it whenever you already have working HTML — a snippet copied from a design handoff, a legacy template, or a block pasted from a framework's docs — and need it in Pug form. Because it runs entirely in your browser, you can paste proprietary or unreleased markup without it being uploaded anywhere, which makes it safe for internal code you can't send to a third-party service.
Read the output as a one-to-one structural mirror of your input: each line is one element, deeper indentation means a child, and tag#id.class(attr="value") text is the canonical shape. So <a href="/" class="brand">Home</a> becomes a.brand(href="/") Home — the class moved into .brand shorthand and the visible text trails the parentheses. A bare div with only a class is often shortened further to just .class, since Pug assumes a div when no tag name is given.
A caveat worth knowing: the tool covers the common subset of Pug, so always compile and eyeball the result before committing it. Watch for inline event handlers, conditional comments, raw script/style blocks, and multi-line text — these can need manual touch-up, and indentation must use a consistent character (all spaces or all tabs) or Pug will throw a compile error.
Frequently asked questions
Is my data uploaded anywhere?
No — everything runs in your browser. Your code never leaves your device, so it's safe for private work and runs offline once loaded.
Is this tool free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between Jade and Pug?
They are the same template engine — Jade was renamed Pug in 2016 because of a trademark conflict, so the syntax is essentially identical. Newer projects use the .pug file extension and the pug npm package, while older codebases may still reference Jade.
How do classes and IDs work in Pug syntax?
Classes are written with a leading dot and IDs with a leading hash directly after the tag, like p.intro#main. If you omit the tag name entirely, Pug defaults to a div, so .card is the same as div.card.
Can I convert Pug back into HTML?
Pug is a templating language that compiles to HTML, so converting forward is the normal direction. Going from HTML to Pug is a syntax transformation like this tool does; going from Pug to HTML requires running it through the Pug compiler, which also resolves variables, mixins, and includes.
How is text content handled in Pug?
Inline text follows the element on the same line after a space, such as h1 Welcome. Longer or multi-line text uses a piped block, where each line begins with a | character under the parent element.
Does Pug care about indentation?
Yes — indentation defines the parent-child structure, replacing HTML's closing tags. You must use a single consistent indentation style throughout a file; mixing tabs and spaces causes a compile error.
How do I write attributes in Pug?
Attributes go inside parentheses after the tag, separated by commas or spaces, for example a(href="/", target="_blank"). Boolean attributes can be written alone, like input(disabled), and you can mix shorthand classes with parenthesized attributes.
Will this tool convert a full HTML page with doctype and head?
It converts the markup structure it is given, mapping elements, attributes, and nesting into Pug. A standalone doctype becomes the Pug doctype keyword, but features outside the common Pug subset — such as inline scripts, comments, or templating directives — may need manual review after conversion.
Related tools