Pug Templating Guide 📄

Pug (formerly Jade) is a high-performance template engine for Node.js that simplifies HTML generation with a clean, whitespace-sensitive syntax. It’s widely used for dynamic web development and integrates seamlessly with frameworks like Express.

Key Features 🌟

• Compact Syntax: Write HTML with minimal code

  h1 Hello, World!
  p This is a Pug template.
  

• Conditional Logic: Use if/else statements

  if user.isLoggedIn  
    p Welcome back, #{user.name}!
  else  
    p Please log in.
  

• Loops: Iterate over data with each

  each item in items  
    li= item.name
  

• Mixing HTML & JS: Embed JavaScript directly

  script.
    var data = #{JSON.stringify(data)};
  

Example Usage 🌐

Let’s create a simple template:

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 #{title}
    p Welcome to #{siteName}

When to Use Pug 🚀

• For server-side rendering in Node.js apps
• To streamline HTML with nested structures
• When working with Express or Nunjucks frameworks
• For rapid prototyping of UI components

Learn More 📚

Want to dive deeper? Check out our Node.js Integration Tutorial to see how Pug works with Express!