Simple Tempreites template rendering

https://github.com/fiatjaf/tempreites

HTML

<script src="https://raw.githubusercontent.com/fiatjaf/tempreites/master/tempreites.min.js"></script>
<textarea id="template">
template (as html)
</textarea>
<textarea id="data">
data
</textarea>
<button id="button">render</button>
<div id="results"></div>

<script>
setTimeout(function () {
  document.getElementById('data').value = "{\n  title: 'Austrian economists and their theories',\n  theories: [\n    { author: 'Menger', theory: 'Subjective value', url: '/subj' },\n    { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },\n    { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' },\n  ]\n}"
  document.getElementById('template').value = '<div id="austrianeconomics">\n  <h1 class="title"></h1>\n  <ul id="theories">\n    <li>\n      <span class="author"></span>\n      <span>\n        <a class="theory"\n           data-bind-here="href"\n           data-bind-there="url">\n        </a>\n      </span>\n    </li>\n  </ul>\n</div>'
}, 20)
    
</script>

CSS

textarea, button { width: 500px; display: block; }
textarea {height: 150px}

JavaScript

function render () {
  var template = document.getElementById('template').value;
  template = template.replace(/\\n/g, '');
  eval('var data = ' + document.getElementById('data').value);
  var res = Tempreites.render(template, data);
  document.getElementById('results').innerHTML = res;
}

document.getElementById('button').addEventListener('click', render);