Jade, now known as Pug, is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It is used to generate HTML dynamically and is known for its clean and minimal syntax.
Template Rendering
Jade allows you to render HTML templates with dynamic data. In this example, a simple template is rendered with a variable 'name' which is replaced with 'World'.
const pug = require('pug');
const html = pug.render('p Hello, #{name}!', { name: 'World' });
console.log(html);Template Inheritance
Jade supports template inheritance, allowing you to create a base template and extend it in other templates. This example demonstrates how 'index.pug' extends 'layout.pug' and defines a content block.
const pug = require('pug');
const html = pug.renderFile('index.pug');
console.log(html);
// index.pug
// extends layout.pug
// block content
// h1= title
// p Welcome to #{title}
// layout.pug
// doctype html
// html
// head
// title= title
// body
// block contentMixins
Mixins in Jade allow you to create reusable blocks of code. This example shows a mixin 'list' that generates an unordered list from an array of items.
const pug = require('pug');
const html = pug.renderFile('mixin.pug');
console.log(html);
// mixin.pug
// mixin list(items)
// ul
// each item in items
// li= item
// +list(['Apple', 'Banana', 'Cherry'])EJS (Embedded JavaScript) is a simple templating language that lets you generate HTML markup with plain JavaScript. It is similar to Jade but uses a more traditional syntax that is closer to HTML, making it easier for those familiar with HTML to use.
Handlebars is a popular templating engine that provides the power necessary to let you build semantic templates effectively with no frustration. It is known for its simplicity and logic-less templates, which makes it different from Jade's more feature-rich approach.
Mustache is a logic-less template syntax. It is named 'logic-less' because it lacks any explicit control flow statements like if and else. This makes it very different from Jade, which supports more complex logic and features.
Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.
- eachvia tarball or git:
make install
via npm:
npm install jade
var jade = require('jade');
// Render a string
jade.render('string of jade', { options: 'here' });
// Render a file
jade.renderFile('path/to/some.jade', { options: 'here' }, function(err, html){
// options are optional,
// the callback can be the second arg
});
scope Evaluation scope (this)locals Local variable objectfilename Used in exceptions, and required by cachecache Cache intermediate JavaScript in memory keyed by filenamedebug Outputs tokens and function body generatedCRLF and CR are converted to LF before parsing.
Jade is indentation based, however currently only supports a 2 space indent. We may implement tab support in the future, until then use spaces, so make sure soft tabs are enabled in your editor.
A tag is simply a leading word:
html
for example is converted to <html></html>
tags can also have ids:
div#container
which would render <div id="container"></div>
how about some classes?
div.user-details
renders <div class="user-details"></div>
multiple classes? and an id? sure:
div#foo.bar.baz
renders <div id="foo" class="bar baz"></div>
div div div sure is annoying, how about:
#foo
.bar
which is syntactic sugar for what we have already been doing, and outputs:
`<div id="foo"></div><div class="bar"></div>`
Simply place some content after the tag:
p wahoo!
renders <p>wahoo!</p>.
well cool, but how about large bodies of text:
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
renders <p>foo bar baz rawr.....</p>
interpolation? yup! both types of text can utilize interpolation,
if we passed { locals: { name: 'tj', email: 'tj@vision-media.ca' }} to render()
we can do the following:
#user #{name} <#{email}>
outputs <div id="user">tj <tj@vision-media.ca></div>
Actually want #{} for some reason? escape it!
p \#{something}
now we have <p>#{something}</p>
Single line comments currently look the same as JavaScript comments, aka "//" and must be placed on their own line:
// just some paragraphs
p foo
p bar
would output
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
Jade also supports unbuffered comments, by simply adding a hyphen:
//- will not output within markup
p foo
p bar
outputting
<p>foo</p>
<p>bar</p>
ul
li one
li two
li three
Fucked up your whitespace? no worries, jade's error reporting should help you out. Jade instruments the compiled JavaScript to provide meaningful context for runtime exceptions.
ul
li one
li two
Error: /Users/tj/Projects/jade/examples/layout.jade:2
1. 'ul'
2. ' li one'
Invalid indentation, got 2 expected 1.
Note: Trailing are generated on EOS if not present.
Jade currently supports '(' and ')' as attribute delimiters.
a(href='/login', title='View login page') Login
Alternatively we may use the colon to separate pairs:
a(href: '/login', title: 'View login page') Login
Boolean attributes are also supported:
input(type="checkbox", checked)
Boolean attributes with code will only output the attribute when true:
input(type="checkbox", checked: someValue)
Note: Leading / trailing whitespace is ignore for attr pairs.
To add a doctype simply use !!! followed by an optional value:
!!!
Will output the transitional doctype, however:
!!! 5
Will output html 5's doctype. Below are the doctypes defined by default, which can easily be extended: var doctypes = exports.doctypes = { '5': '', 'xml': '', 'default': '', 'transitional': '', 'strict': '', 'frameset': '', '1.1': '', 'basic': '', 'mobile': '' };
To alter the default simply change:
jade.doctypes.default = 'whatever you want';
Filters are prefixed with :, for example :markdown and
pass the following block of text to an arbitrary function for processing. View the features
at the top of this document for available filters.
body
:markdown
| Woah! jade _and_ markdown, very **cool**
| we can even link to [stuff](http://google.com)
Renders:
<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://google.com">stuff</a></p></body>
Jade currently supports three classifications of executable code. The first
is prefixed by -, and is not buffered:
- var foo = 'bar';
This can be used for conditionals, or iteration:
- for (var key in obj)
p= obj[key]
Due to Jade's buffering techniques the following is valid as well:
- if (foo)
ul
li yay
li foo
li worked
- else
p shit! didnt work
Hell, even verbose iteration:
- if (items.length)
ul
- items.forEach(function(item){
li= item
- })
Anything you want!
Next up we have escaped buffered code, which is used to
buffer a return value, which is prefixed by =:
- var foo = 'bar'
= foo
h1= foo
Which outputs bar<h1>bar<h1/>. Code buffered by = is escaped
by default for security, however to output unescaped return values
you may use !=:
p!= aVarContainingMoreHTML
The on exception made in terms of allowing "vanilla" JavaScript, is
the - each token. This takes the form of:
- each VAL[, KEY] in OBJ
An example iterating over an array:
- var items = ["one", "two", "three"]
- each item in items
li= item
outputs:
<li>one</li>
<li>two</li>
<li>three</li>
iterating an object's keys and values:
- var obj = { foo: 'bar' }
- each val, key in obj
li #{key}: #{val}
would output <li>foo: bar</li>
Non-enumerables are simply passed as the only value:
- each n in 15
li= n
would simply output <li>15</li>
You can also nest these!
- each user in users
- each role in user.roles
li= role
Output html to stdout:
jade examples/*.jade --pipe
Generate examples/*.html:
jade examples/*.jade
Pass options:
jade examples/layout.jade --options '{ locals: { title: "foo" }}'
Usage info:
Usage: jade [options] <path ...>
Options:
-o, --options STR JavaScript options object passed
-p, --pipe Output to stdout instead of PATH.html
-h, --help Output help information
FAQs
A clean, whitespace-sensitive template language for writing HTML
The npm package jade receives a total of 137,634 weekly downloads. As such, jade popularity was classified as popular.
We found that jade demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.