Jade to HTML
Convert Jade/Pug template syntax into HTML. It runs entirely on your device — nothing is uploaded.
Example
Input
ul
li.item one
li.item two
Output
<ul>
<li class="item">one</li>
<li class="item">two</li>
</ul>
How it works
The converter reads indentation-based Jade/Pug — tags, #id/.class shorthand, attributes and text — and emits the matching HTML. It covers the common subset of Pug.
Good to know
Jade to HTML converts indentation-based Jade (now called Pug) template markup into plain HTML right in your browser. You paste templates that use tag names, #id and .class shorthand, attributes, and nested text, and the tool expands them into the equivalent angle-bracket markup. It's aimed at front-end and full-stack developers who inherited legacy Jade templates, are migrating a project off Pug, or simply want to see what a snippet compiles to without spinning up a build step.
Reach for it when you're porting an old Express or static-site project that used Jade views, when you need to drop a converted fragment into a non-Pug codebase, or when you're learning how Pug's whitespace-significant syntax maps onto real HTML. Because it runs entirely client-side, you can use it on proprietary template code without sending anything to a server, and it keeps working offline once the page has loaded.
Read the output as a direct, indentation-preserving translation: each Jade line becomes a tag, the shorthand after a tag name turns into id/class attributes, and trailing text becomes the element's inner text. Compare the indentation in your input to the nesting in the result to confirm parent-child relationships came out as you expected.
One caveat: the converter handles the common subset of Pug, so advanced features like mixins, conditionals, loops, includes/extends, interpolation (#{...}), and inline JavaScript may not expand the way the full Pug compiler would. For anything beyond static markup, treat the result as a starting point and verify the dynamic parts manually.
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 to Pug in 2016 because of a trademark conflict, so older projects reference "jade" while newer ones use "pug." The syntax is largely identical, which is why a Jade-to-HTML converter also works on Pug files.
Can I convert HTML back into Jade or Pug?
This tool only goes one direction, from Jade/Pug to HTML. Converting the other way requires a separate HTML-to-Pug converter, since collapsing HTML into indentation-based syntax is a different process.
How does Jade handle classes and IDs in its shorthand?
A leading dot adds a class and a leading hash adds an id, so writing div.card#main becomes <div class="card" id="main">. If you omit the tag name and start with a class or id, Jade assumes a div by default.
Does this tool support Pug mixins, loops, and conditionals?
It covers the common static subset — tags, attributes, classes, ids, and text — so dynamic features like mixins, each loops, if conditionals, and includes may not expand fully. For those, run the official Pug compiler with your data.
Why does Jade use indentation instead of closing tags?
Jade nests elements by indentation level rather than explicit closing tags, which removes the need to match opening and closing brackets. The converter relies on consistent indentation, so mixing tabs and spaces can produce unexpected nesting.
Is it safe to convert private template code with this tool?
Yes, the conversion happens entirely in your browser and no code is sent to any server. This makes it suitable for proprietary or confidential templates, and it continues to work without an internet connection once loaded.
How do I add plain attributes like href or src in Jade?
Attributes go in parentheses after the tag, separated by commas, for example a(href="/about", target="_blank"). The converter renders these as standard HTML attributes on the resulting element.
Related tools