Jade Cheatsheet

Getting started

doctype html
html
  head
    title My Page
  body
    h1 Hello World

No closing tags. Nesting via indentation.

doctype html
doctype xml
doctype transitional

a: img(src="logo.png")
ul: li: a(href="#") Link

.content
#main
a.btn.primary#submit

Div is default if omitted.

a(href="//google.com") Google
input(type="text" name="user" required)

input(type="checkbox" checked)
input(type="checkbox" checked=false)

a(style={color: 'red'})
a(class=['foo', 'bar'])
a(class={active: isActive})

p
  | Line one
  | Line two

script.
  console.log('hello')

p= user.name
p= 'Escaped: <html>'

p!= '<strong>Raw HTML</strong>'

⚠️ XSS risk!

p Hello #{name}
p Raw: !{htmlContent}
p Inline #[strong tag]

if user.admin
  p Admin
else if user.guest
  p Guest
else
  p User

unless user.isAnonymous
  p Logged in

each val in [1, 2, 3]
  li= val

each val, i in items
  li= i + ': ' + val

each val in items
  li= val
else
  li No items

- var n = 0
while n < 4
  li= n++

mixin list
  ul
    li foo
    li bar

+list

mixin pet(name)
  li.pet= name

+pet('cat')
+pet('dog')

mixin card(title)
  .card
    h2= title
    if block
      block

+card('Title')
  p Content

mixin link(href, name)
  a(class!=attributes.class href=href)= name

+link('/foo', 'Foo')(class="btn")

//- layout.pug
html
  head
    block head
  body
    block content

extends layout.pug

block head
  title My Page

block content
  h1 Hello

extends layout.pug
append head
  script(src="/app.js")

include includes/head.pug
include includes/nav.pug

style
  include style.css
script
  include app.js

// Visible in HTML

//- Hidden from output