Pug is a high-performance template engine heavily used with Node.js that compiles indentation-based shorthand into clean HTML.
Basic Document & Elements
doctype html
html(lang="en")
head
title My Application
body
h1.heading#main-title Welcome
p Just a simple paragraph of text.
.container
| Plain text can be piped
Attributes & JavaScript Expressions
//- Standard attributes
input(type="text" name="query" placeholder="Search..." autofocus)
//- Dynamic evaluated attributes
- const isAuthed = true;
body(class=isAuthed ? "authenticated" : "guest")
//- Style object shorthand
div(style={ color: 'red', background: '#fff' })
Control Flow & Iteration
Conditionals
if user.role === 'admin'
button.danger Delete User
else if user.isLoggedIn
a(href="/profile") Profile
else
a(href="/login") Log In
Loops
ul
each item, index in items
li= `${index + 1}: ${item.name}`
else
li No items found.
Template Inheritance & Partials
Base Layout (layout.pug)
doctype html
html
head
title
block title
| Default Title
body
include ./partials/navbar.pug
main
block content
Page Implementation (index.pug)
extends layout.pug
block title
| Home Page
block content
h1 Hello World!
Mixins (Reusable Macros)
//- Define mixin
mixin userCard(name, role)
.card
h3= name
span.badge= role
if block
.card-body
block
//- Invoke mixin
+userCard('Alice', 'Lead Engineer')
p Alice leads the core infrastructure team.