Convert HTML to Pug (Jade)
Turn HTML markup into an indented Pug template, the language formerly called Jade
Your data stays with you. Conversion happens inside the browser; nothing is sent to a server.
Did this tool do the job?
Thanks, your feedback came through.
How it works
You have finished HTML, maybe a mockup from a designer, and your Express or other Node.js app renders Pug templates. Paste the HTML into the left pane and the Pug version appears on the right as you type. A line like <div class="card" id="order"> becomes .card#order: a div with a class or id drops the tag name because div is Pug's default tag. Other attributes go in parentheses, as in a(href='/', target='_blank'). A single line of text stays next to its tag (p Hello); text mixed with bold words or links is split into lines that start with |. The contents of script, style and pre are kept exactly. The result line tells you how many tags turned into how many Pug lines.
This tool is also known as html to pug, html to jade, html to pug converter, html to jade converter, convert html to pug online.
What is Pug (Jade)?
Pug is an HTML template language used mostly with Node.js. You never write closing tags; indentation shows which element sits inside which. Because it supports variables, loops and conditions, servers such as Express use it to build pages. Until 2016 it was called Jade, which is why older projects still contain .jade files.
What is Class and id shorthand?
In Pug a class is written with a dot and an id with a hash right after the tag name: section.content#main. If the tag name is left out, Pug assumes a div, so .card alone means <div class="card">. The dot shorthand only accepts letters, digits, hyphens and underscores; classes with a colon or slash go into the class attribute in parentheses.
What is the difference between HTML and Pug?
HTML wraps every element in an opening and a closing tag, and the browser reads it directly. Pug describes the same structure with indentation, has no closing tags and shortens common parts such as classes and ids. A Pug file is compiled to HTML on the server before it reaches the browser, and in return templates can use variables, loops and shared pieces. In short, HTML is the output and Pug is the recipe that produces it.
Three things to watch
Whitespace: Pug does not add spaces between lines. In mixed text such as "Hello <b>world</b>" the tool keeps the space at the end of the | line so the words do not run together. Keep those trailing spaces when you edit the result.
Hash and braces: Pug treats #{...} and #[...] inside text as code. If your HTML contains "#{", the tool writes it as \#{ and Pug prints it as plain text.
Classes with special characters: Tailwind classes such as md:flex or w-1/2 cannot use the dot shorthand. The tool moves them into a class='md:flex' attribute; Pug merges both forms into one class value.
Why there is no Pug to HTML direction
Turning Pug back into HTML needs the Pug compiler itself, and together with its JavaScript parser it is too large to load in a web page under this site's 2 MB limit. This page therefore converts one way only.
To compile a .pug file to HTML, use the pug package in your project; that is how your server renders it anyway.
Unclosed tags
Browsers forgive unclosed tags, but Pug reads structure from indentation alone. The tool keeps the content of an unclosed tag, yet has to guess the nesting. When that happens the result line adds "unclosed tag found"; check the indentation in the output.
Frequently asked questions
Is Jade the same as Pug?
Yes. The Jade template language was renamed Pug in 2016 because of a trademark issue. The syntax is almost identical; the output of this tool uses the core syntax that works in current Pug and in older Jade files.
Why did & in an attribute become &?
Pug escapes attribute values when it renders them. If & were left as it is, Pug would escape it again and the page would show &amp;. The tool writes the decoded value, so the compiled HTML matches your original.
Are comments kept?
Yes. An HTML comment becomes a Pug comment starting with //, which Pug renders back as an HTML comment. Change // to //- if the comment should not appear in the page at all.
Is my code uploaded anywhere?
No. The HTML parser and the Pug writer both run in your browser; the code you paste does not leave this page.