Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

77 lines (59 sloc) 2.258 kB


As a intensive client-side javascript template user, I alwasy try to find the best way to load the templates. And I found it is a very good practise that compiling the templates into on single JSON file.

You can get one single JSON file and use JSON.parse convert it into a dict. With the dict, you can easily pick up the the template you wish to render, which saves you a lot of trouble by getting html file one by one.

* tpl_str might be something looks like:
* {
*    "h2": "<h2 class="title">{{title}}!</h2>",
*     "p": "<p class="warnning">{{msg}}</p>"
* }
var tpl_str = ... // get the JSON content from some where, 
                  // either from requre.js text plugin or a AJAX call.
var tpl = JSON.parse(tpl_str);

//render to: <h2 class="title">Hello World~!</h2>
Mustache.render(tpl.h2, {title: 'Hello World~!'});
//render to "<p class="warnning">Alert!</p>"
Mustache.render(tpl.p, {msg: 'Alert!'});

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-html2json

Then add this line to your project's grunt.js gruntfile:



Example Code

  html2json: {
    dist: {
       src: ['src/*.txt', 'src/*.html'],
       dest: 'dist/templates.json'

With this task, you can compile all txt and html files in src into dist/templates.json.

You might also want to trigger the compiled process by watching the file change. Append following ine in the grunt.initConfig list.

watch: {
  files: '<config:html2json.dist.src>',
  tasks: 'default'


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Release History

  • 0.1 ++ Well, it works (testcase is yet to be done). ++ JSON is pretty print by default. Later will add an option to switch.


Copyright (c) 2012 Tom Tang
Licensed under the MIT license.

Jump to Line
Something went wrong with that request. Please try again.