explaingit

pugjs/pug

21,849JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

A template engine that lets you write HTML in a cleaner, indentation-based syntax instead of typing out all the tags, then automatically converts it to full HTML.

Mindmap

mindmap
  root((Pug))
    What it does
      Converts shorthand to HTML
      Embeds logic and variables
      Reduces repetition
    How it works
      Indentation-based syntax
      Compiles to HTML strings
      Runs on Node.js
    Use cases
      Web app view templates
      Server-side rendering
      Email templates
    Tech stack
      JavaScript
      Node.js
      npm

Things people build with this

USE CASE 1

Write cleaner HTML templates for Node.js web applications without repetitive tag syntax.

USE CASE 2

Embed conditional logic and loops directly in your page templates to show different content based on user state.

USE CASE 3

Inject server data into page layouts at render time using variables.

USE CASE 4

Generate email templates or other HTML documents programmatically with less boilerplate.

Tech stack

JavaScriptNode.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Pug is a template engine for JavaScript, a tool that lets developers write web page structures in a shorter, cleaner shorthand syntax and then automatically convert that shorthand into the full HTML that browsers actually read. Instead of typing out opening and closing tags like standard HTML requires, Pug lets you write indented, tag-free code where the hierarchy of your page is shown through indentation, much like how Python uses whitespace rather than braces. The practical benefit is less repetition and fewer typos. A few lines of Pug expand into a much longer HTML file with all the proper tags, attributes, and nesting in place. Pug also supports logic, you can embed conditional statements ("if you are a logged-in user, show this; otherwise show that") and loops directly inside your templates, and it supports variables so you can inject data from your server into the page layout at render time. Pug runs on Node.js, which is the JavaScript runtime commonly used on web servers. You install it via npm (the standard JavaScript package manager), then call it from your server code to compile your Pug templates into HTML strings that get sent to the browser. It can also be compiled ahead of time into JavaScript files for use directly in browsers, though the README notes this is a large file and pre-compiling is recommended. It was previously known as "Jade" before a name change due to a trademark conflict; as of version 2, the package name is "pug." You'd use Pug when building a Node.js web application and wanting a cleaner, more maintainable way to write your HTML views rather than writing raw HTML files. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Show me how to convert a standard HTML page with a navigation bar and footer into Pug syntax.
Prompt 2
How do I use if/else statements in Pug templates to show different content for logged-in vs. logged-out users?
Prompt 3
Set up a basic Node.js Express app that uses Pug to render a homepage with a list of items passed from the server.
Prompt 4
What's the difference between compiling Pug on the server vs. pre-compiling it for the browser, and when should I use each?
Prompt 5
How do I pass variables from my Node.js backend into a Pug template and display them on the page?
Open on GitHub → Explain another repo

Generated 2026-05-21 · Model: sonnet-4-6 · Verify against the repo before relying on details.