JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/jsmart/dist/jsmart.min.js"></script>
<div id="output">
  
</div>

<script id="template" type="text/x-jsmart-tmpl">
	Hello {$name}, welcome to the example demo of jSmart.
  <br />
  <br />
  Below are the names of books I have read:-
  <ul>
  {foreach $books as $book}
  	<li>
    	{$book}
    </li>
  {/foreach}
  </ul>
</script>

JavaScript

var content = document.getElementById('template').innerHTML;
var compiled = new jSmart(content);
var output = compiled.fetch({
	name: 'world',
  books: [
  	'A Storm of Swords',
    'A Game of Thrones',
    'A Clash of Kings'
  ]
});
document.getElementById('output').innerHTML = output;