Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Super Simple Coffeescript Templating
Latest commit 47dfc80 @rizqme version change
Failed to load latest commit information.
lib added render support, clean up mess
src added render support, clean up mess
.gitignore Initial Commit
Cakefile Initial Commit added render support, clean up mess
package.json version change


Super Simple CoffeeScript Templating

Batik is an inline templating engine for CoffeeScript, inspired by CoffeeKup, that lets you write your template directly as a CoffeeScript function

Why Using Batik?

Batik lets you write your template directly in CoffeeScript an it will compile to javascript like your other .coffee files do. No on-runtime parsing are needed, no eval, so it's probably blazing fast.


Just grab node.js and npm and you're set:

npm install batik


Using batik is simple

batik = require 'batik'

myTemplate = batik (title, desc) ->
    @h1 title
    @p desc

# using node.js's util.puts
puts myTemplate("Batik", "Batik is traditional textile dyeing technique originated from Java")


<p>Batik is traditional textile dyeing technique originated from Java</p>

You can write nested elements just like in CoffeeKup:

hcard = batik ({name, surname, tel, email, address, website}) ->
    @div "hcard-#{name.split(' ').join('-')}-#{surname}", class:'vcard', ->
        fn = ->
            @span class:'given-name', name
            @span class:'family-name', surname

        if website
            @a class:'url fn n', href:website, fn
            @span class:'fn n', fn

        @a class:'email', href:"mailto:#{email}", email
        if address
            {street, city} = address
            @div class:'adr', ->
                @span(class:'street-address', street) if street
                @span(class:'locality', city) if city
        if tel
            @div class:'tel', tel

# using node.js's util.puts
puts hcard
    name: 'Ahmad Rizqi'
    surname: 'Meydiarso'
    tel: '+49 99 9999 9999'
    email: ''
    address: {city: 'Hamburg'}
    website: ''


<div class="vcard" id="hcard-Ahmad-Rizqi-Meydiarso">
    <a class="url fn n" href="">
        <span class="given-name">Ahmad Rizqi</span>
        <span class="family-name">Meydiarso</span>
    <a class="email" href=""></a>
    <div class="adr">
        <span class="locality">Hamburg</span>
    <div class="tel">+49 99 9999 9999</div>

You can also use it with MVC framework like Backbone.js or any other and make use of it's render proxy

view =
    items: [
        {city:'Jakarta', country:'Indonesia'}
        {city:'Hamburg', country:'Germany'}
    renderItem: batik ({city, country}) ->
        @li class:'item', ->
            @h2 city
            @p country

    render: batik ->
        @h1 "Cities and Its Countries"
        @ul ->
            for item in @self.items
                @render 'item', item # this calls renderItem

puts view.render()


<h1>Cities and Its Countries</h1>
    <li class="item">
    <li class="item">
Something went wrong with that request. Please try again.