Emblem: Handlebars + Indentation + Ember-compatibility

Emblem.js is an indentation-based templating language that compiles down to the Handlebars runtime. It is therefore

1. Efficiently/easily precompilable
2. Compilable in the browser
3. Fully compatible with Ember.js's auto-updating templates
4. Way more fun to write/maintain than {{mustached}}'d HTML

Check out the Emblem.js docs site http://www.emblemjs.com.

Also check out the Embercast on Emblem.js

Syntax Examples

• Read the syntax documentation.
• Watch the Embercast
• Check out this JSBin.
• Check out this demo of an ember-rails site with Emblem enabled.

Using Emblem in your application

You can use Emblem to compile either to vanilla Handlebars or Emberized Handlebars. Let's assume you're compiling to Emberized Handlebars for use with an Ember app.

Compiling in the Browser

Follow the pattern in this JSBin:

1. Include Handlebars
2. Include Emblem
3. Include Ember

If you have a recent enough version of Ember, all the Emblem code you put into <script type="text/x-emblem"> tags will get compiled and stripped out of the DOM. If you're using an out-of-date Ember, you can trigger this to happen manually before app initialization via

Ember.onLoad('application', Emblem.compileScriptTags);

Via Rails 3.1+

Add the following to your Gemfile:

gem 'emblem-rails'

emblem-rails presently depends on ember-rails. With these two gems, any templates ending in .emblem will be (pre)compiled with Emblem.js.

Also, check out the demo app which uses the above configuration.

Updates to Emblem syntax do not require an update to emblem-rails. To update to the latest Emblem, you can run:

bundle update emblem-source

Via Rake Pipeline

Coming extremely soon.

All Emblem Plugins

1. emblem-rails
2. barber-emblem, a Precompilation library for Ruby (used in ember-rails)
3. emblem-brunch, Emblem support for Brunch.io
4. Mimosa (support for Emblem since v 0.10.1)
5. grunt-emblem, Emblem support for Grunt (and Yeoman)

Building Emblem.js

Clone the repo, then run:

bundle
rake

This will also automatically run the test suite.

Syntax Highlighting

Check out vim-emblem for Vim editor support for Emblem.

Otherwise, for now, please refer to syntax highlighting solutions for Slim, which is not much different from Ember's. At some point, we'll have something even more custom tailored to Emblem (feel free to take a swing at it and send in a PR).

TODO / Contribute

• Syntax suggestions / improvements
• Syntax highlighting
• Rake pipeline
• Plugins for all sorts of frameworks
• Refactor the code to be cross-platform (browser/Node/etc). It currently is now, it's just mad ugly.

Reporting Bugs

If you find a bug in Emblem syntax, please try to reproduce it in its simplest form with this JSBin before reporting an issue, which will help me nail down the source of the issue.