live test Jade on your browser!

Jade templates, test and see the results live.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.min.js"></script>
<div id="so">SEO(please enable javascript~)</div>
<textarea id="jadehi">
.con
  .pex
    h1= title
  .cot
    h1
    List
      ul.list
        -for(var i in tmp=[1,2,8,"yooo~",9]) li= "Item - "+tmp[i]
  .fot
    .line p= foot</textarea>
<textarea id="jadedoc">{ "title": "x", "foot": "y" }</textarea>

SCSS

.pex {
background: #6292A8;
padding: 12px;
margin: 8px;
border: 3px solid #DDD;
box-shadow: 0 0 8px;
text-align: center;
font: 300 12pt\/16pt serif;
}
.cot {
padding: 12px;
margin: 8px;
box-shadow: 0 0 8px,rgba(0, 0, 0, 0.1) 0 0 99px inset;
}
.list {
border: 1px solid #CFC;
padding: 8px;
line-height: 150%;
    li {
    background: #F0F0F0;
    box-shadow: 0 8px 16px -16px inset;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 8px;
    font-size: 9pt;
    }
}
.fot {
background: #E4D480;
padding: 12px;
margin: 8px;
border: 3px solid #DDD;
box-shadow: 0 0 8px;
text-align: center;
font: 300 12pt\/16pt serif;
}

textarea {
    display: block;
    height: 200px;
    width: 400px;
    float: left;
}

JavaScript

function recompile() {
    var j = jade.compile($("#jadehi").val())
    var rendered = j(JSON.parse($('#jadedoc').val()))
    $("#so").html(rendered)
}

$(function () {
    recompile()
    $('textarea').on('change', function () {
        recompile()
    })
})