A wrapper for RevealJS that allows you to write the slides in Jade


Use server side Jade templates to create Reveal.js slideshows using Grunt.

The idea is that all you have to include is grunt-reveal-jade as a dependency, and you can simply create slides in a Jade file, livereload as you edit, and pick themes (and down the road other Reveal options) in your Gruntfile.

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-reveal-jade --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


Or you can install all grunt npms using the matchdep npm and:


In your project's Gruntfile, add a section named reveal to the data object passed into grunt.initConfig().

  reveal: {
    options: {
      // Task-specific options go here. 
    your_target: {
      // Target-specific file lists and/or options go here. 
  • slides: the directory you will store your Jade files in.
    • default: "slides"
  • build: the directory the HTML slides we be placed into
    • default: "build"
  • temp: the directory and intermediate build is placed. This directory is created and deleted before the completion of the build task.
    • default: "temp"
  • assets: Directory that will be adding from your root to the build, for images, etc.
    • default: "assets"
  • cleanBuild: a boolean indicating whether the build directory should be deleted before a new build.
    • default: true
  • livereload: a boolean indicating whether the lr snippet script include tag included (you can also add the lr script via connect middleware to be less invassive to the build)
    • default: false
  • title: The title tag for the slideshow
  • description: Meta tag description for the slideshow
  • author: Author meta for the slideshow
  • theme: The Reveal theme for the slideshow
    • default: "default"
  • syntax: The syntax highlight css for the slideshow
    • default: "zenburn"

I'll be adding more options to pass through to RevealJS. To see an example of how to hook up live reload with RevealJS see this Gruntifle.

I'll be adding a grunt-init with livereload options soon.

  reveal: {
    mySlides: {}

To run use grunt reveal

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.