Cheatsheet

Pug

Basics

DoctypeCopy
doctype html
iAdds the standard line at the very top of a page that tells the browser "this is a modern HTML page".
Tags & nestingCopy
html
  head
    title Pug Demo
  body
    h1 Hello
    p A paragraph
iYou write tag names without brackets, and instead of closing tags, indentation shows what's nested inside what.
Self-closing tagsCopy
img(src="cat.png")
br
input(type="text")
iTags like images and line breaks don't need a separate closing tag — Pug already knows they don't wrap around anything.

Attributes

ID & class shorthandCopy
div#container.card.card--active
  p Content
iA quick way to give a tag an id or class, using # and . instead of writing out the full attribute.
Attribute listCopy
a(href="https://example.com" target="_blank") Link
input(type="checkbox" checked disabled)
iExtra settings for a tag go in parentheses right after it. Writing just a name with no value (like "checked") turns that setting on.
Dynamic attribute valueCopy
div(class=isActive ? "active" : "inactive")
img(src=imageUrl alt=imageAlt)
iAn attribute value written without quotes is treated as a small piece of code, so it can change based on your data.

Text & Interpolation

Inline textCopy
p Just some inline text
h1 Welcome to the site
iWhatever text you put right after a tag name on the same line becomes that tag's content.
Block of text (pipe)Copy
p
  | This line and
  | this line render
  | as one paragraph.
iA line starting with | is treated as plain text, useful for writing several lines of text under one tag.
String interpolationCopy
p Hello #{user.name}, you have #{count} messages
iLets you drop a value from your data directly into a line of text.
Unescaped interpolationCopy
div !{trustedHtmlString}
iLike the one above, but inserts raw HTML instead of plain text — only use this with content you fully trust.

JavaScript & Code

Unbuffered codeCopy
- var total = price * quantity
- if (total > 100) total = 100
iA line starting with - runs a small bit of logic behind the scenes, without printing anything onto the page.
Buffered outputCopy
p= user.name
p= 1 + 2
iA line ending in = runs a small calculation and prints its result onto the page.

Conditionals

if / else if / elseCopy
if user
  p Welcome, #{user.name}
else if isAnonymous
  p Welcome, Anonymous
else
  p Please log in
iShows different content depending on a condition, without needing extra symbols like parentheses or curly braces.
unlessCopy
unless user.isVerified
  p.warning Please verify your email
iThe opposite of "if" — this content only shows up when the condition is NOT true.

Loops

eachCopy
ul
  each item, index in items
    li= index + ': ' + item
iRepeats a block of content once for every item in a list, giving you access to each item (and its position) as you go.
for (alias of each)Copy
for val in [1, 2, 3]
  li= val
iAnother word for "each" — the two do exactly the same thing.
whileCopy
- var n = 0
while n < 5
  li= n++
iRepeats a block of content for as long as a condition stays true.

Includes & Extends

includeCopy
include ./partials/header.pug
include ./partials/footer.pug
iPulls the content of another file in and drops it right at that spot — handy for reusing a shared header or footer.
extends & blockCopy
// layout.pug
html
  body
    block content

// page.pug
extends ./layout.pug

block content
  p Page-specific content
iLets a page reuse a shared layout, only filling in the specific parts that are different for that page.

Mixins

Define & callCopy
mixin pet(name)
  li.pet= name

ul
  +pet('Cat')
  +pet('Dog')
iDefines a reusable chunk of template that you can call by name (with different inputs) wherever you need it.
Mixin with block contentCopy
mixin card()
  .card
    block

+card()
  h2 Title
  p Passed in as the mixin's block
iLets you pass custom content into a reusable template chunk, which decides where that content should appear.

Comments

Buffered commentCopy
// This renders as an HTML comment
iA comment that stays visible if someone views the page's HTML source.
Unbuffered commentCopy
//- This is stripped out entirely, not rendered
iA note for yourself that gets completely removed and never shows up anywhere in the final page.

Filters & Case

Markdown filterCopy
:markdown
  # Title
  Some **bold** markdown content.
iLets you write a block using another format (like Markdown) and have it converted into HTML automatically.
case / whenCopy
case status
  when 'active'
    p.green Active
  when 'paused'
    p.yellow Paused
  default
    p.gray Unknown
iShows different content depending on which value matches — a tidy, multiple-choice version of if/else.
What is this Cheatsheet?

A quick reference for modern CSS, SASS, SCSS, Pug, and React syntax. Switch between tabs to browse selectors, layout, hooks, and more. Click any snippet to copy it, or hover the info icon for an explanation.