JS templating engines

readme.md

There's been another mention of InstantSearch.js being "unsafe" (it uses new Function) instantsearch.js#3524 and instantsearch.js#2868, so I looked around to alternatives for Hogan (the templating engine).

I found these templating engines. So far I'm not sold on a single one, but here are all of them, grouped per type.

Template-string based

These are all returning either DOM nodes that can be used with appendChild, or render directly into a node. Here we need to check to make sure they are (or need to be) Node-compatible (most are).

1. https://yarn.pm/nanohtml (aka bel)

   • Small? 8kb (in total, before gz)
   • Safe? Yes, no eval or new Function, raw done with innerHTML (specific import)
   • Simple? Kinda, template strings, no real loops etc.
   • Event Listeners? Yes, with html/React-like syntax

2. https://yarn.pm/lit-html

   • Small? 10kb (in total, before gz)
   • Safe? Yes, no eval or new Function, raw done with innerHTML (specific import)
   • Event Listeners? Yes, with Vue-like syntax

3. https://yarn.pm/hyperhtml

   • Small? 16.8 kb (out of the running for being too big)

4. https://yarn.pm/lighterhtml

   • Small? 13kb
   • Safe? no eval / no new Function, raw with innerHTML
   • Event Listeners? Yes, html/React-like

String template-based

These are all returning HTML strings eventually, which should be added to the DOM manually with innerHTML.

1. https://yarn.pm/hogan.js

   • Small? 8kb (in total, before gz, no tree-shaking possible)
   • Safe? No, uses new Function for interpolation
   • Event Listeners? No

2. https://yarn.pm/mustache

   • Small? 9kb (in total, before gz, no tree-shaking possible)
   • Safe? Seemingly, no eval, no new Function, raw is done in userland (everything is innerHTML)
   • Event Listeners? No

3. https://yarn.pm/handlebars

   • Small? 14kb (runtime) / 74kb (full?) (out of the running for being too big)