Skip to content
This repository has been archived by the owner. It is now read-only.
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

Jade - template compiler for PHP5.3

Jade is a high performance template compiler heavily influenced by Haml and implemented for PHP 5.3.


  • high performance parser
  • great readability
  • contextual error reporting at compile & run time
  • html 5 mode (using the !!! 5 doctype)
  • combine dynamic and static tag classes
  • no tag prefix
  • clear & beautiful HTML output
  • filters
    • :php
    • :cdata
    • :css
    • :javascript
  • you even can write & add own filters throught API
  • TextMate Bundle
  • VIM Plugin

Public API

$dumper = new PHPDumper();
$dumper->registerVisitor('tag', new AutotagsVisitor());
$dumper->registerFilter('javascript', new JavaScriptFilter());
$dumper->registerFilter('cdata', new CDATAFilter());
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());

// Initialize parser & Jade
$parser = new Parser(new Lexer());
$jade   = new Jade($parser, $dumper);

// Parse a template (both string & file containers)
echo $jade->render($template);


Line Endings

CRLF and CR are converted to LF before parsing.


Jade is indentation based, however currently only supports a 2 space indent.


A tag is simply a leading word:


for example is converted to <html></html>

tags can also have ids:


which would render <div id="container"></div>

how about some classes?


renders <div class="user-details"></div>

multiple classes? and an id? sure:

renders <div id="foo" class="bar baz"></div>

div div div sure is annoying, how about:


which is syntactic sugar for what we have already been doing, and outputs:

<div id="foo"></div><div class="bar"></div>

jade.php has a feature, called "autotags". It's just snippets for tags. Autotags will expand to basic tags with custom attributes. For example:


will expand to <input type="text" /> & it's the same as input( type="text" ), but shorter. Another examples:

input:submit( value="Send" )

will become <input type="submit" value="Send" />.

You can even add you own autotags with:

$parser->setAutotag('input:progress', 'input', array('type'=>'text', class=>'progress-bar'));

that will expands to <input type="text" class="progress-bar" />.

It also supports new HTML5 tags (input:email => <input type="email"/>).

Tag Text

Simply place some content after the tag:

p wahoo!

renders <p>wahoo!</p>.

well cool, but how about large bodies of text:

  | foo bar baz
  | rawr rawr
  | super cool
  | go Jade go

renders <p>foo bar baz rawr.....</p>

Actually want <?php echo ... ?> for some reason? Use {{}} instead:

p {{$something}}

now we have <p><?php echo $something ?></p>


  li one
  li two
  li three


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:

$doctypes = array(
       '5' => '<!DOCTYPE html>',
       'xml' => '<?xml version="1.0" encoding="utf-8" ?>',
       'default' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">',
       'transitional' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">',
       'strict' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">',
       'frameset' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">',
       '1.1' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">',
       'basic' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "">',
       'mobile' => '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "">'


Jade Comments

Jade supports sharp comments (//- COMMENT). So jade block:

//- JADE
- $foo = "<script>";
//- ##### COMMENTS ARE SUPPER! ######
  - switch ($foo)
    -case 2 $foo
//-    - case 'strong'
  //-      strong#name= $foo * 2
    -   case 5
      p some text

will be compiled into:

<?php $foo = "<script>"; ?>
  <?php switch ($foo) ?>
    <?php case 2 ?>
      <p class="foo"><?php echo $foo ?></p>
    <?php break; ?>
    <?php case 5 ?>
      <p>some text</p>
    <?php break; ?>
  <?php endswitch; ?>

HTML Comments

Jade supports HTML comments (// comment). So block:

  // This is the peanutbutterjelly element
  | I like sandwiches!

will become:

  <!-- This is the peanutbutterjelly element -->
  I like sandwiches!

As with multiline comments:

  p This doesn't render...
    h1 Because it's commented out!

that compile to:

  <p>This doesn't render...</p>
    <h1>Because it's commented out!</h1>

IE Conditional Comments

Also, Jade supports IE conditional comments, so:

// [if IE]
  a( href = '' )
    h1 Get Firefox

will be parsed to:

<!--[if IE]>
  <a href="">
    <h1>Get Firefox</h1>


Filters are prefixed with :, for example :javascript or :cdata 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.

    | $data = 40;
    | $data /= 2;
    | echo $data;


    $data = 40;
    $data /= 2;
    echo $data;


Buffered / Non-buffered output

Jade currently supports two classifications of executable code. The first is prefixed by -, and is not buffered:

- var $foo = 'bar';

This can be used for conditionals, or iteration:

- foreach ($items as $item):
  p= $item

Due to Jade's buffering techniques the following is valid as well:

- if ($foo):
    li yay
    li foo
    li worked
- else:
  p hey! didnt work

Second is echoed code, which is used to echo a return value, which is prefixed by =:

- $foo = 'bar'
= $foo
h1= $foo

Which outputs

<?php $foo = 'bar' ?>
<?php echo $foo ?>
<h1><?php echo $foo ?></h1>

Code blocks

Also, Jade has Code Blocks, that supports basic PHP template syntax:

  - while (true):
    li item

Will be rendered to:

  <?php while (true): ?>
  <?php endwhile; ?>

But don't forget about colons : after instructions start (- if(true) :).

There's bunch of default ones: if, else, elseif, while, for, foreach, switch, case.


HAML-like template engine for PHP 5.3 & Symfony2




No releases published


You can’t perform that action at this time.