Jade to HTML for templates you inherited
Old Express projects often keep their views in .jade files, written for a package that was deprecated when Jade became Pug. Rendering them normally means installing that outdated dependency and running the whole application with its data. This Jade to HTML page takes a shortcut for the static parts: open a .jade file, compile it in the browser and read the markup it produces, so you can extract it, document it or plan a migration.
It uses the same compiler as the Pug to HTML compiler. For current .pug files, that page is the better reference because it covers modern Pug syntax in depth. Use this one when you are dealing with legacy Jade and need to know which old constructs will cause trouble.
Example: an old dashboard view
doctype html
html
head
title Legacy dashboard
script.
window.appVersion = "1.4";
body
#main.container
h1 Reports
p
| Last export:
em none yet
a.btn(href="/reports/new", title="New report") Create report
// shown in the output
//- hidden noteWith pretty printing on, the result is:
<!DOCTYPE html>
<html>
<head>
<title>Legacy dashboard</title>
<script>
window.appVersion = "1.4";
</script>
</head>
<body>
<div class="container" id="main">
<h1>Reports</h1>
<p>Last export:<em> none yet</em></p><a class="btn" href="/reports/new" title="New report">Create report</a><!-- shown in the output-->
</div>
</body>
</html>The // comment is kept as an HTML comment and the //- comment disappears. The space before "none yet" comes from the extra space after em, a common trick in old templates for spacing inline elements.
Legacy Jade syntax to check before you compile
| Found in old templates | What this compiler does | What to change |
|---|---|---|
!!! on its own | Writes <!DOCTYPE html> | Nothing here; use doctype html if the file will move to Pug, which no longer accepts !!! |
!!! 5 or doctype 5 | Writes <!DOCTYPE html> (the old Jade shorthand for HTML5) | Use doctype html if the file will move to Pug |
a(href="/u/#{id}") | Copies /u/#{id} into the attribute literally | Use a sample value here; in Pug, write a(href="/u/" + id) |
script with code indented below it, no dot | Reads each line as a tag: var x = 1; becomes <var>x = 1;</var> | Write script. with a trailing dot |
- var, each, if, mixin, +call, include, extends, block | Stops with an error naming the line | Replace with static sample markup, or render inside the real app |
The script case deserves attention because it does not raise an error: the output looks plausible until you notice the stray tags. Search old files for script and style lines without a trailing dot before trusting the result.
A practical migration workflow
- Copy one view and swap every variable, loop and include for representative static content, so the file compiles on its own.
- Fix the legacy forms from the table above: doctype line, dotless script blocks and interpolated attributes.
- Compile here and compare the HTML with what the running application serves for the same page.
- Decide the destination. To stay on the engine, rename the file to
.pugand switch the project fromjadetopug. To leave it, keep the compiled HTML, or turn it into components with the HTML to JSX converter.
New fragments for a project that remains on Jade can go the other way with the HTML to Jade converter. To see exactly what changed between the old and the cleaned-up template, paste both into the diff checker.
Reading the compiled output
- Pretty print – on by default and indents the HTML. Switch it off for compact markup without added whitespace.
- Boolean attributes – when the template starts with
doctype html,input(disabled)becomes<input disabled>. Without that doctype line it becomes<input disabled="disabled"/>, the XHTML style. Add the doctype if you want HTML5 output. - Literal output – lines such as
p= "Welcome"with a quoted string compile; expressions that reference variables do not. - Files – both
.jadeand.pugfiles can be opened directly into the editor.
Compilation runs in your browser, so templates are not sent to a server.