Description #
Pug is a high-performance templating engine for Node.js and browsers that allows developers to write clean and minimal HTML using indentation-based syntax. It simplifies HTML structure and improves code maintainability by reducing boilerplate tags.
History #
Pug was originally created in 2010 as Jade, a Node.js template engine inspired by HAML. Due to a trademark issue in 2016, the project was renamed to Pug. It became a popular choice for Express.js and other Node.js frameworks, praised for its concise syntax and integration with dynamic server-side rendering. Over time, it expanded to support mixins, template inheritance, and advanced logic.
Hello World Code #
doctype html
html
head
title Hello, World!
body
h1 Hello, World!How to Run #
Install Pug globally or locally with npm:
npm install -g pug-cliSave the above code in a .pug file, then render it:
pug hello.pugView the generated hello.html file in a browser.
- Online Editors:
Key Concepts #
- Indentation-based syntax
- No closing tags
- Uses
.for classes and#for IDs - Reduces boilerplate
- Template inheritance
- Mixins for reusability
- Dynamic code with conditionals and loops
- JavaScript expressions inline
- Clean, readable structure
- Common in Express.js apps
Try It Online #
Fun Facts #
- Pug was one of the first widely used template engines in the Node ecosystem.
- It’s often used with Express.js but can also run in static site generators.
- Despite its simplicity, Pug supports powerful features like includes and filters.
