Discover Jade, a great template engine for Node

Jade is a powerful tool that makes writing HTML easier than ever. We use it extensively in our project and wanted to share our experience.

What is Jade ? #

Jade is a robust, elegant, feature rich template engine for nodejs. 1

A web template engine is a tool that allow developers to write simpler HTML, while adding some nice features that quickly become essential.
These templates are then rendered in standard, W3C-compliant HTML and are completely transparent to your users.

What does it look like ? #

As a simple example, this :

doctype html
        title Shawt !
        h1 Home page
            li.menuitem Item 1
            li.menuitem Item 2
            li.menuitem Item 3

is rendered as :

<!DOCTYPE html>
<html lang="en">
        <title>Shawt !</title>
        <h1>Home page</h1>
        <ul id="menu">
            <li class="menuitem">Item 1</li>
            <li class="menuitem">Item 2</li>
            <li class="menuitem">Item 3</li>

What about those features ? #

Jade adds some essential features to HTML, such as conditionals, loops, and mixins.

Conditionals #

- var user = { name: 'John' }
if user
          // Filtered inline output
              Welcome, #{}
        form(name="login", action="/login", method="post")
              input(type="text", name="user")
              input(type="password", name="pass")
              input(type="submit", value="login")

is rendered as :

<div class="welcomebox">
    <!-- Filtered inline output-->
    <p>Welcome, John</p>

Loops #

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

is rendered as :


Mixins #

Mixins allow developers to create snippets to reduce redundancy and increase code reusability.

//- Declaration
mixin list
        li foo
        li bar
        li baz
//- Use

is rendered as :


Great then, how do I get it ? #

Jade is a great, simple tool that gives more freedom to web developers to build what they want, the way they want. We highly recommend you to try it :)

You can visit the official website [here](, or install Jade through npm via npm install jade.

Hope this helps !

  1. Extracted from Jade’s Github page : http:// 


Now read this

Deploying our app

By now, our app looks okay and works reasonably well. But we were still stuck on local testing, meaning that we couldn’t test it on mobile platforms to see what it rendered. Thus, we decided to deploy our app. Hosting our app # As NodeJS... Continue →