JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="http://earwicker.com/carota/carota-debug.js"></script>
A carota instance:
<div id="editor"></div>
You can <button id="save">Save</button> or 
<button id="load">Load</button> via the JSON area below:
<br>
<textarea id="json"></textarea>

CSS

#editor, #json {
    width: 500px; 
    height: 100px; 
    border: 1px solid silver;
    margin: 2px;
}

JavaScript

var editor = carota.editor.create($('#editor')[0]);

$('#save').click(function() {
    var json = editor.save();
    $('#json').val(JSON.stringify(json, null, 4));
});

$('#load').click(function() {    
    try {
        var json = JSON.parse($('#json').val());
        editor.load(json);
    } catch (x) {
        alert(x);
    }
});