Jade/Pug to HTML: Template Engine Conversion Guide

Jade (now renamed Pug) is a high-performance template engine that simplifies HTML writing with a clean, whitespace-sensitive syntax.

What is Pug?

Pug (formerly Jade) is a template engine for Node.js that compiles to HTML. It features:

• Clean, whitespace-based syntax
• No closing tags needed
• Variables and interpolation
• Mixins and includes
• Conditionals and loops

Basic Syntax

Elements

// Pug
div
  h1 Hello World
  p This is a paragraph

<!-- HTML Output -->
<div>
  <h1>Hello World</h1>
  <p>This is a paragraph</p>
</div>

Classes and IDs

// Pug
div#main.container.fluid
  p.text-center Hello

<!-- HTML Output -->
<div id="main" class="container fluid">
  <p class="text-center">Hello</p>
</div>

Attributes

// Pug
a(href="https://example.com" target="_blank") Click here
input(type="text" name="email" placeholder="Enter email" required)

<!-- HTML Output -->
<a href="https://example.com" target="_blank">Click here</a>
<input type="text" name="email" placeholder="Enter email" required>

Variables and Interpolation

// Pug
- var name = "John"
- var items = ["Apple", "Banana", "Orange"]

h1 Hello #{name}
ul
  each item in items
    li= item

<!-- HTML Output -->
<h1>Hello John</h1>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Conditionals

// Pug
- var loggedIn = true

if loggedIn
  p Welcome back!
else
  a(href="/login") Please log in

Mixins

// Pug
mixin button(text, type)
  button(class=type)= text

+button("Submit", "primary")
+button("Cancel", "secondary")

<!-- HTML Output -->
<button class="primary">Submit</button>
<button class="secondary">Cancel</button>

JavaScript Conversion

const pug = require('pug');

// Compile to function
const compiledFunction = pug.compileFile('template.pug');
const html = compiledFunction({ name: 'John' });

// Direct render
const html = pug.renderFile('template.pug', { name: 'John' });

Best Practices

• Use consistent indentation (2 spaces)
• Leverage mixins for reusable components
• Use includes for common elements
• Keep templates clean and readable

Try Our Conversion Tools

• Jade to HTML - Convert Jade templates
• Pug to HTML - Convert Pug templates
• HTML Beautifier - Format output

Conclusion

Pug templates offer a clean, efficient way to write HTML. Understanding conversion helps with debugging and migrating legacy templates.