Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T07:13:55.400Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-27T22:39:26.277Z
Answers.LastActivityDate: 2015-04-27T22:39:26.277Z
Answers.UserDisplayName: Aaron Berkowitz
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T12:55:05.120Z
Answers.Text: Sweet, I'll check out Swig – thanks! Have you tested the Twig.js subset? Curious how the two compare.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T16:55:51.570Z
Answers.Text: Twig.js is meant as a port, Swig just happens to use a pretty much identical syntax.I've used both
Answers.UserDisplayName: Tim Kelty
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T17:04:34.697Z
Answers.Text: 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.
Answers.UserDisplayName: Tim Kelty
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T17:28:21.717Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T12:09:17.650Z
Answers.LastActivityDate: 2015-04-28T12:09:17.650Z
Answers.UserDisplayName: Tim Kelty
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T05:58:46.253Z
Answers.Text: 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".
Answers.UserDisplayName: Brad Bell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T06:17:16.270Z
Answers.Text: 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/). :)
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T07:21:17.557Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-28T05:34:54.097Z
Answers.LastActivityDate: 2015-04-28T05:34:54.097Z
Answers.UserDisplayName: Lindsey D
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-27T21:34:27.747Z
Comments.Text: Is the HTML you need to render in Twig templates?
Comments.UserDisplayName: Aaron Berkowitz
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-27T22:15:57.963Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Tags: <plugin-development><javascript><garnish>
Title: JS templating in Craft CP
ThreadText: # 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](https://github.com/pixelandtonic/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...**
  
  ```php
  craft()->templates->includeJsFile('//full/path/to/cdn.js');
  
  ```
  
  When you use [**`includeJsFile`**](http://buildwithcraft.com/docs/templating/includejsfile), it wraps your path in a standard `<script>` tag... It doesn't matter where the file is, as long as the path is valid.
  
  Keep in mind, a PHP call will take effect in both the back-end *and* front-end of your site. So to keep the file loaded *only* in your CP, make sure to wrap a conditional around it:
  
  ```php
  if (craft()->request->isCpRequest()) {
      craft()->templates->includeJsFile('//full/path/to/cdn.js');
  }
  
  ```
  
  Don't want to CDN? No problem! The best place to store local JS files would be in a `resources` folder:
  
  ```
  /craft
    /plugins
      /myplugin
        /resources
          /js
            /handlebars.min.js
  
  ```
  
  In that case, you can use [**`includeJsResource`**](http://buildwithcraft.com/docs/plugins/resources) instead of `includeJsFile`.
  
  > **Comments:**
  > **username_4**: Crazy good answer, username_3.  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 username_4! 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, username_3. 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.  
  
  ---
  
  