JSFiddle - React, Tailwind, and code Playground

by Stepan Suvorov

HTML

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<textarea id="data">
    {
    "header": "Colors",
    "items": [
    {"name": "red", "first": true, "url": "#Red"},
    {"name": "green", "link": true, "url": "#Green"},
    {"name": "blue", "link": true, "url": "#Blue"}
    ],
    "empty": false
    }
</textarea>
<textarea id="template">
    <h1>{{header}}</h1>
    {{#bug}}
    {{/bug}}

    {{#items}}
    {{#first}}
    <li><strong>{{name}}</strong></li>
    {{/first}}
    {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
    {{/link}}
    {{/items}}

    {{#empty}}
    <p>The list is empty.</p>
    {{/empty}}
</textarea>
<textarea id="output"></textarea>

<input type="button" value="go" id="go">

CSS

textarea{
            width: 50%;
            height: 200px;
        }

JavaScript

var data = JSON.parse(document.getElementById("data").value);
var template = document.getElementById("template").value;

document.getElementById("go").onclick = function () {
    document.getElementById("output").value = Mustache.to_html(template, data);
}