About the HTML to Jade Converter
Jade was renamed Pug in 2016 after a trademark dispute, and the language did not change with the name. Projects still on Express 3, older Harp sites and a great many Node tutorials from that era all say Jade, and their .jade files compile with today toolchain almost unchanged. This converter targets that world: paste markup and get an indented template back.
Every element becomes a line whose depth reflects its place in the tree. An id turns into #id and classes into a chain of .class segments, and a div carrying either is written without its tag name because that is what the language assumes. Whatever attributes remain go inside parentheses with quoted values, while valueless attributes such as required or selected stay bare. Script and style bodies are emitted as block text after a dot so the code inside is copied verbatim.
The one real difference between eras is the doctype line. Jade before version 1.0 wrote !!! 5, and a template using that form will not compile on a modern installation, while the newer doctype html is rejected by the ancient one. Pick whichever matches the project you are feeding. Short text sits on the tag line by default and longer runs move to piped lines below, which you can turn off if your house style keeps text separate. Compile the result back with Jade to HTML, or use HTML to Pug if the project has already been renamed.
How to use
- Paste a page or a fragment of markup into the left pane.
- Match the Indent setting to the project, since indentation is what defines nesting here.
- Choose !!! 5 under Doctype form for a Jade 0.x codebase, or leave it modern.
- Copy the template, or press Swap to compile it straight back to markup.
Common questions
- Is Jade the same language as Pug?
- Yes, apart from the name and a handful of syntax changes made at version 1.0, of which the doctype line is the one people hit first.
- Will the output contain loops or conditionals?
- No. The converter produces a literal template that matches your markup. Deciding which parts deserve an each block is a design choice left to you.
- What happens to inline SVG?
- SVG elements convert like any others, though camel case attribute names such as viewBox are preserved because Jade does not lowercase attributes.
- Why is a class written as an attribute instead of shorthand?
- Shorthand cannot express a class containing a colon or a slash, so utility framework names such as md:flex fall back to a normal class attribute.