This interactive documentation illustrates the most important features of the Jade templating language. You can play around with the examples and watch the html output in real time. For more detailed explanations visit the official documentation.
Jade Syntax :
doctype html
html
head
title my jade template
body
h1 Hello #{name}
Jade Data
{"name": "Sabath"}
Html Output
<!DOCTYPE html>
<html>
<head>
<title>my jade template</title>
</head>
<body>
<h1>Hello Sabath</h1>
</body>
</html>
ID and Classess
#content
.block
input#bar.foo1.foo2
Html Output
<div id="content">
<div class="block">
<input id="bar" class="foo1 foo2"/>
</div>
</div>
Nesting
ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B
ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B
HTML Output
<ul id="books">
<li><a href="#book-a">Book A</a></li>
<li><a href="#book-b">Book B</a></li>
</ul>
Attributes
input(type="text", placeholder="your name")
HTML Output
<input type="text" placeholder="your name"/>
Attributes with Data
input(type=type, value='Hello #{name}')
HTML Output
<input type="text" value="Hello Davy"/>
Jade Data
{"type": "text", "name": "Davy"}
If Else
if name == "Dara"
h1 Hello Dara
else
h1 My name is #{name}
Jade Data
{"name": "Dara"}
<h1>Hello Dara</h1>
For And Each
select
each book, i in books
option(value=i) Book #{book}
HTML Output
<select>
<option value="0">Book A</option>
<option value="1">Book B</option>
<option value="2">Book C</option>
</select>
Jade Data
{"books": ["A", "B", "C"]}
Case
case name
when "Dara"
p Hi Dara!
when "Davy"
p Howdy Davy!
default
p Hello #{name}!
Jade Data
{"name": "Davy"}
HTML Output
<p>Hi Davy!</p>
