<p>There is no built in client side/JS templating available out of the box that I know of. You can always render Twig templates via Ajax by <a href="http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions-with-javaScript" rel="nofollow">calling a plugin controller</a> and returning a rendered HTML string, but that doesn't seem to fit your use case.</p>

CC BY-SA 3.0
2015-04-28T07:13:55.400Z
In most cases, this would definitely be the answer. However, the trip server side to compile a template seems a bit redundant when all the data is on the client side, and there are no interactions w/ Craft services etc.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-04-27T22:39:26.277Z
2015-04-27T22:39:26.277Z
Aaron Berkowitz
<p>There's also <a href="http://paularmstrong.github.io/swig/" rel="nofollow">Swig</a>. We've successfully been able to share JS templating with Craft templates, and it's worked <em>pretty</em> well. Not without it's caveats, though. Mostly coming from slight syntax differences and available filters.</p>

CC BY-SA 3.0
2015-04-28T12:55:05.120Z
Sweet, I'll check out Swig – thanks! Have you tested the Twig.js subset? Curious how the two compare.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-04-28T16:55:51.570Z
Twig.js is meant as a port, Swig just happens to use a pretty much identical syntax.I've used both
Tim Kelty
CC BY-SA 3.0
2015-04-28T17:04:34.697Z
Twig.js is probably more easily interoperable with Craft templates as it's meant to be a port.

One thing I plan to do eventually is make a craft extension for twig.js and/or swig, that would give you all the filters and template functionality you would have in craft, so that you can truly use 1 template for php and js rendered templates.
Tim Kelty
CC BY-SA 3.0
2015-04-28T17:28:21.717Z
Cool, thanks for your input, Tim! There's also a [Grunt plugin](https://www.npmjs.com/package/grunt-twig-render) which uses Twig.js – a Craft extension for the latter would open up some interesting possibilities.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-04-28T12:09:17.650Z
2015-04-28T12:09:17.650Z
Tim Kelty
<p>The only JS library that ships with Craft (besides the Craft-specific <a href="https://github.com/pixelandtonic/Garnish">Garnish</a>) is jQuery. Of course, jQuery is a helpful JS library, but by no means a full-fledged framework. Fortunately, adding a separate JS library is painfully easy!</p>

<p><strong>How to CDN from a Twig template...</strong></p>

<pre><code>{% includeJsFile '//full/path/to/cdn.js' %}
</code></pre>

<p><strong>How to CDN from PHP...</strong></p>

<pre class="lang-php prettyprint-override"><code>craft()-&gt;templates-&gt;includeJsFile('//full/path/to/cdn.js');
</code></pre>

<p>When you use <a href="http://buildwithcraft.com/docs/templating/includejsfile"><strong><code>includeJsFile</code></strong></a>, it wraps your path in a standard <code>&lt;script&gt;</code> tag... It doesn't matter where the file is, as long as the path is valid.</p>

<p>Keep in mind, a PHP call will take effect in both the back-end <em>and</em> front-end of your site. So to keep the file loaded <em>only</em> in your CP, make sure to wrap a conditional around it:</p>

<pre class="lang-php prettyprint-override"><code>if (craft()-&gt;request-&gt;isCpRequest()) {
    craft()-&gt;templates-&gt;includeJsFile('//full/path/to/cdn.js');
}
</code></pre>

<p>Don't want to CDN? No problem! The best place to store local JS files would be in a <code>resources</code> folder:</p>

<pre><code>/craft
  /plugins
    /myplugin
      /resources
        /js
          /handlebars.min.js
</code></pre>

<p>In that case, you can use <a href="http://buildwithcraft.com/docs/plugins/resources"><strong><code>includeJsResource</code></strong></a> instead of <code>includeJsFile</code>.</p>

CC BY-SA 3.0
2015-04-28T05:58:46.253Z
Crazy good answer, Lindsey.  I don't want to edit because I rarely get which word to use right, but I'm pretty sure it's "will take affect" instead of "will take effect".
Brad Bell
CC BY-SA 3.0
2015-04-28T06:17:16.270Z
Thanks Brad! If that's your biggest complaint, I can work with that. Also, [I actually nailed the grammar too](https://wordwatchtowers.wordpress.com/2010/01/01/take-affect-or-take-effect/). :)
Lindsey D
CC BY-SA 3.0
2015-04-28T07:21:17.557Z
Thanks for the thorough reply, Lindsey. I feel Mustache/Handlebars is a pretty good fit for Craft, so CDN'ing that would be a good solution. Also, there is actually a [JS port for Twig](https://github.com/justjohn/twig.js/), though I haven't tried it yet.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-04-28T05:34:54.097Z
2015-04-28T05:34:54.097Z
Lindsey D
<p>I'm writing a plugin where I need to render some semi-complex HTML clientside at runtime (all inside the CP).</p>

<p>Does Garnish (or any other library/framework/JS-thingamabob shipped with Craft) offer any built-in JS templating functionality a'la <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars</a> or <a href="http://underscorejs.org/#template" rel="nofollow">Underscore</a>?</p>

CC BY-SA 3.0
2015-04-27T21:34:27.747Z
Is the HTML you need to render in Twig templates?
Aaron Berkowitz
CC BY-SA 3.0
2015-04-27T22:15:57.963Z
Not really, rendering serverside doesn't really make sense in this case as all of the data will be clientside. The plan is to use ```craft()->templates->includeJs()``` to inject the raw HTML template on pageload, before compiling it in my plugin's JS without $.html()'ing myself to death :) Just wondering if Craft ships with any JS templating functionality, or if I'd need to include Handlebars, Underscore or the like with my plugin.
Mats Mikkel Rummelhoff
<plugin-development><javascript><garnish>
JS templating in Craft CP
# JS templating in Craft CP

(Asked by: username_0 on 2015-04-27)

I'm writing a plugin where I need to render some semi-complex HTML clientside at runtime (all inside the CP).

Does Garnish (or any other library/framework/JS-thingamabob shipped with Craft) offer any built-in JS templating functionality a'la [Handlebars](http://handlebarsjs.com/) or [Underscore](http://underscorejs.org/#template)?

**Tags:** plugin-development, javascript, garnish

> **Comments:**
> **username_1**: Is the HTML you need to render in Twig templates?  
> **username_0**: Not really, rendering serverside doesn't really make sense in this case as all of the data will be clientside. The plan is to use ```craft()->templates->includeJs()``` to inject the raw HTML template on pageload, before compiling it in my plugin's JS without $.html()'ing myself to death :) Just wondering if Craft ships with any JS templating functionality, or if I'd need to include Handlebars, Underscore or the like with my plugin.  

---

## 3 answers

### Answer by username_3 on 2015-04-28. Score: 8 | Accepted answer

The only JS library that ships with Craft (besides the Craft-specific Garnish) is jQuery. Of course, jQuery is a helpful JS library, but by no means a full-fledged framework. Fortunately, adding a separate JS library is painfully easy!
How to CDN from a Twig template...
{% includeJsFile '//full/path/to/cdn.js' %}

How to CDN from PHP...
craft()->templates->includeJsFile('//full/path/to/cdn.js');

When you use includeJsFile, it wraps your path in a standard

> **Comments:**
> **username_4**: Crazy good answer, Lindsey.  I don't want to edit because I rarely get which word to use right, but I'm pretty sure it's "will take affect" instead of "will take effect".  
> **username_3**: Thanks Brad! If that's your biggest complaint, I can work with that. Also, [I actually nailed the grammar too](https://wordwatchtowers.wordpress.com/2010/01/01/take-affect-or-take-effect/). :)  
> **username_0**: Thanks for the thorough reply, Lindsey. I feel Mustache/Handlebars is a pretty good fit for Craft, so CDN'ing that would be a good solution. Also, there is actually a [JS port for Twig](https://github.com/justjohn/twig.js/), though I haven't tried it yet.  

---

### Answer by username_1 on 2015-04-27. Score: 3

There is no built in client side/JS templating available out of the box that I know of. You can always render Twig templates via Ajax by [calling a plugin controller](http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions-with-javaScript) and returning a rendered HTML string, but that doesn't seem to fit your use case.

> **Comments:**
> **username_0**: In most cases, this would definitely be the answer. However, the trip server side to compile a template seems a bit redundant when all the data is on the client side, and there are no interactions w/ Craft services etc.  

---

### Answer by username_2 on 2015-04-28. Score: 3

There's also [Swig](http://paularmstrong.github.io/swig/). We've successfully been able to share JS templating with Craft templates, and it's worked *pretty* well. Not without it's caveats, though. Mostly coming from slight syntax differences and available filters.

> **Comments:**
> **username_0**: Sweet, I'll check out Swig – thanks! Have you tested the Twig.js subset? Curious how the two compare.  
> **username_2**: Twig.js is meant as a port, Swig just happens to use a pretty much identical syntax.I've used both  
> **username_2**: Twig.js is probably more easily interoperable with Craft templates as it's meant to be a port.  One thing I plan to do eventually is make a craft extension for twig.js and/or swig, that would give you all the filters and template functionality you would have in craft, so that you can truly use 1 template for php and js rendered templates.  
> **username_0**: Cool, thanks for your input, Tim! There's also a [Grunt plugin](https://www.npmjs.com/package/grunt-twig-render) which uses Twig.js – a Craft extension for the latter would open up some interesting possibilities.  

---

