Pug
By the Pug open-source community
js that generates HTML using an indentation-based syntax instead of angle brackets and closing tags, letting developers write markup more tersely while embedding JavaScript expressions and control-flow logic directly in templates. js web…
Definition
Pug is a templating engine for Node.js that generates HTML using an indentation-based syntax instead of angle brackets and closing tags, letting developers write markup more tersely while embedding JavaScript expressions and control-flow logic directly in templates. It compiles templates into JavaScript functions that render HTML strings from a data object, and is commonly used with Express and other Node.js web frameworks.
Overview
Pug, formerly named Jade before a trademark-related rename, was built around the observation that most of the visual noise in HTML comes from opening and closing tags and explicit angle-bracket syntax. Its templates use whitespace indentation to express nesting, similar to how Python uses indentation for code blocks, so a paragraph inside a div is simply written as a nested line rather than wrapped in matching tag pairs. Attributes are written in parentheses after the tag name, and text content follows directly on the same line or as further indented plain text. This terseness was aimed squarely at developers who found repetitive closing tags a source of clutter and merge-conflict noise in large view files. Underneath this syntax, Pug compiles each template into a JavaScript function at either build time or first render, and that function is later invoked with a data object to produce an HTML string. Because Pug embeds real JavaScript for logic, tags can be interpolated with `#{}` syntax, and full control structures such as `if`, `each`, and `case` are available directly in the template using Pug's own keyword syntax rather than raw JavaScript blocks, which keeps the terse indentation style consistent even where logic appears. Compared to logic-less engines like Mustache, Pug is considerably more permissive, closer in spirit to EJS or Handlebars but distinguished by its indentation-based syntax rather than explicit delimiters wrapped in HTML. This trade-off means Pug templates are shorter to write but require developers to learn a syntax that looks nothing like the HTML it produces, which can slow onboarding for teams unfamiliar with it, and indentation errors can silently produce incorrect nesting. In practice, Pug is most often paired with Express to render server-side views for traditional multi-page Node.js applications, and it has also seen use in static site generators and email template pipelines within the JavaScript ecosystem. Its mixins feature lets developers define reusable template fragments similar to functions, reducing duplication across views that share common components such as navigation bars or form fields. Pug's biggest limitation is also its defining feature: the indentation-sensitive syntax makes copy-pasting HTML from other sources tedious, since it must first be converted to Pug's format, and some developers find debugging whitespace-related rendering bugs less intuitive than debugging mismatched tags. As single-page application frameworks with their own templating conventions, such as JSX in React or Vue's template syntax, have grown dominant, Pug's popularity for new projects has declined relative to its peak, though it remains a viable choice for server-rendered Node.js applications that value concise markup.
Key Features
- Indentation-based syntax that eliminates closing tags entirely
- Embedded JavaScript expressions for dynamic content and logic
- Native if, each, and case keywords for template control flow
- Mixins allow defining and reusing parameterized template fragments
- Compiles templates into JavaScript rendering functions for performance
- Tight integration with Express as a default view engine option
- Supports template inheritance through blocks and extends