Skip to content
Markup as CoffeeScript.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Markup as CoffeeScript

In celebration of whyday, here's a revisiting of Markaby's concept, this time with the fine flavour of fresh CoffeeScript:

doctype 5
html ->
  head ->
    meta charset: 'utf-8'
    title "#{@title} | My awesome website"
    meta(name: 'description', content: @description) if @description?
    link rel: 'stylesheet', href: '/stylesheets/app.css'
    style '''
      body {font-family: sans-serif}
      header, nav, section, footer {display: block}
    script src: '/javascripts/jquery.js'
    coffeescript ->
      $(document).ready ->
        alert 'Alerts are so annoying...'
  body ->
    header ->
      h1 (@title or 'No Title')
      nav ->
        ul ->
          (li -> a href: '/', -> 'Home') unless @path is '/'
          li -> a href: '/chunky', -> 'Chunky'
          li -> a href: '/bacon', -> 'Bacon!'
    section ->
      h2 "Let's count to 10:"
      p i for i in [1..10]
    footer ->
      p 'Bye!'


  • Your template logic in a hell of a clean, expressive and flexible language.

  • The most efficient CoffeeScript "filter" possible in a template engine (based on cutting edge ".toString()" technology).

  • Embedded templates (one-file apps FTW!) that you can still recognize.

  • Easily extend it into your own higher-level "dsl" by defining helpers as locals.

  • The same template language in node.js and the browser.

  • Works with both coffeescript and javascript apps.

  • HTML 5 ready! Boring legacy doctypes and elements also available.

  • It's just coffeescript! Syntax checking, syntax highlighting and other goodies are already available.


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

npm install coffeekup


coffeekup = require 'coffeekup'

puts coffeekup.render "h1 'You can feed me raw strings!'"
puts coffeekup.render -> h1 "Or live code. I'm not too picky."

With express:

app.register '.coffee', require('coffeekup')
app.set 'view engine', 'coffee'

app.get '/', (req, res) ->
  # Will render views/
  res.render 'index', context: {foo: 'bar'}

With meryl (see also their own take):

meryl.h 'GET /', (req, resp) ->
  people = ['bob', 'alice', 'meryl']
  resp.render 'layout', content: 'index', context: {people: people}
  templateDir: 'templates'
  templateExt: '.coffee'
  templateFunc: coffeekup.adapters.meryl

In the browser:

<script src="coffeekup.js"></script>
<script src="app.js"></script>

# before compiling:
template = -> h1 "Hello #{@world}"
alert CoffeeKup.render template, context: {world: 'mars'}

Note: this is one of many client-side deployment possibilities, compiling on the server, thus requiring only coffeekup.js (under 2k minified, gzipped) in the browser. To see all serving suggestions, check out regular, decaf and crème.


coffeekup FILE [> OUTPUT]

See /examples for complete versions. Please note that even though all examples are given in coffeescript, you can also their plain javascript counterparts just fine.


  • Like Markaby, not the fastest horse in the stable. Run cake benchmark for details. Performance seems to be pretty acceptable though while rendering templates as code, or as strings with cache on.

  • No special syntax for ids and classes. Less of a big deal though if you're trying to shake off "divitis" and getting into html 5 semantic goodness already.


Latest version tested with node 0.2.3 and CoffeeScript 0.9.4.

Something went wrong with that request. Please try again.