This is an old revision of the document!

Jade

Jade is billed as a template engine for Node.js, but it could be thought of as a language that makes writing HTML easier that also lets you do templating.

Getting started

Installing Jade

To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an installer; on Linux, you should be able to use your package manager¹⁾.

Once you have Node.js installed, you have the choice of installing it so it available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter

npm install jade -g

When I am learning new Node.js modules, I prefer to install them on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter

npm install jade

When this is done you should see a node_modules subdirectory. Inside that directory will be the Jade modules as well as any other modules Jade depends on.

Creating an HTML fragment

jade.render

The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the jade.render method.

renderFragment.js

var jade = require('jade');
 
// Render an HTML fragment from a string literal
// written in Jade.
var htmlFrag = jade.render('p Hello, world');
 
console.log(htmlFrag);

output:

<p>Hello, world</p>

jade.compile

You can also create function that when called will return the fragment with the jade.compile method.

compileFragment.js

var jade = require('jade');
 
// Compile a function that produces an HTML fragment
// from a string literal written in Jade.
var frag = jade.compile('p Hello, world');
 
// Render stuff.
var htmlFrag = frag();
 
console.log(htmlFrag);

output:

<p>Hello, world</p>

jade.renderFile

In a lot of cases, you will want to render code that is stored in a file rather than in a string variable or literal. You can do that with the jade.renderFile method.

myFrag.jade

h1 Hello, there!
p Nice to meet you.

renderFragmentFile_1.js

var jade = require('jade');
 
// Render an HTML fragment from a file
// written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade');
 
console.log(htmlFrag);

output:

<h1>Hello, there!</h1><p>Nice to meet you.</p>

The above produces output that is valid HTML but hard to read. To make the output human-readable, we can pass jade.renderFile an options object with its pretty property set to true. (The options argument can be provided to the jade.render and jade.compile methods as well.)

renderFragmentFile_2.js

var jade = require('jade');
 
options = {
    pretty: true
};
 
// Render an HTML fragment from a file
// written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade', options);
 
console.log(htmlFrag);

output:

<h1>Hello, there!</h1>
<p>Nice to meet you.</p>

Writing output to file

To write the output created to a file, you'll need to use Node.js' fs module.

convertFragment.js

var jade = require('jade');
var fs = require('fs');
 
options = {
    pretty: true
};
 
// Render an HTML fragment from a file
// written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade', options);
 
// Write fragment to a file.
fs.writeFile('myFrag.html', htmlFrag);

output:

$ cat myFrag.html 
 
<h1>Hello, there!</h1>
<p>Nice to meet you.</p>

Creating a simple web page

In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to some fundamental Jade language concepts.

myPage.jade

doctype html
html
    head
        title A Simple Site
    body
        h1 Hello there!
        p Nice to meet you.

buildMyPage.js

var jade = require('jade');
var fs = require('fs');
 
options = {
    pretty: true
};
 
// Render an HTML page from a file
// written in Jade.
var html = jade.renderFile('myPage.jade', options);
 
// Write HTML to a file.
fs.writeFile('myPage.html', html);

output:

$ cat myPage.html 
<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Site</title>
  </head>
  <body>
    <h1>Hello there!</h1>
    <p>Nice to meet you.</p>
  </body>
</html>

¹⁾

See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.

Mithat Konar (the wiki)

Table of Contents

Jade

Getting started

Installing Jade

Creating an HTML fragment

jade.render

jade.compile

jade.renderFile

Writing output to file

Creating a simple web page