Skip to content
Helpers for working with Jade templates in an AMD setting
JavaScript HTML Makefile
Find file
New pull request
Latest commit f3df37e @niftylettuce niftylettuce Release 0.2.3
Failed to load latest commit information.
bin Fixes deprecation of client option
example Detect version of jade and wrap runtime only if required. Closes #10
lib Update to use compileClient
LICENSE.txt initial commit Fix the dead link in the description
index.js Created example app that shows what happens
package.json Release 0.2.3

Jade to AMD conversion helpers

This module lets you use Jade easily on the browser in an AMD environment - like RequireJS.

It provides:

  • a method to return an AMD wrapped Jade runtime.js
  • a method to compile Jade templates to AMD wrapped functions
  • connect middleware to serve the complied templates for development
  • example of a build that puts files in the right place for something like RequireJS to bundle
  • Jade version agnostic - it uses the Jade that you've npm installed.


npm install jade-amd


See the file in the example folder. It contains a guided tour through all the moving parts.


These are the interesting bits:

Connect middleware

The middleware is there for when you are developing. It intercepts requests for template js and compiles and serves the templates directly. This means that you don't need to make any changes to the browser-side code.

var jadeAmd = require('jade-amd');
app.use( '/js/templates/', jadeAmd.jadeAmdMiddleware({}) );

Jade Runtime

Jade ships with a runtime.js that lets you run precompiled templates on the client with out requiring the whole of the Jade templating system. Before Jade v0.31.0 this script needs to be wrapped to work with AMD loaders such as RequireJS. The following command wraps the runtime if needed, otherwise just passes it through unchanged.

# wrap Jade's runtime.js in AMD semantics
jade-amd --runtime > public/js/jadeRuntime.js

Compile and wrap the templates

Goes through all the .jade files and compiles them to JavaScript, and then wraps them for AMD loaders. See the and Makefile in the example folder for more details on how to integrate into your project.

# compile and wrap you templates
jade-amd --from views/ --to public/js/templates

Using the Jade templates on the browser.

Assuming that you have used RequireJS your browser JavaScript will now look something like this:

require([ 'templates/person' ], function(personTemplate) {
  var rendered_content = personTemplate({ name: 'Joe Bloggs' });

And you can use exactly the same template on the server side!


Something went wrong with that request. Please try again.