JSFiddle - React, Tailwind, and code Playground

by error454

CSS

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

JavaScript

var test = {"Description":"Android Video Test","Controls":[{"ControlId":"content_title","Attribute":"innerHTML","Value":"Android Video Test"},{"ControlId":"info","Attribute":"innerHTML","Value":"This template contains 5 video links, this cant be done through the OSP"},{"ControlId":"thumbnail_url","Attribute":"src","Value":"http:\/\/az181270.vo.msecnd.net\/userimages\/2\/2\/image1.png"}],"Type":"Overlay","Actions":[{"Url":"http:\/\/bit.ly\/e18ecS","ControlId":"banner-tapable","__type":"ActionLink","Token":"028e85b76674457e92bc1634880b36de.48908"},{"Url":"http:\/\/www.youtube.com\/watch?v=FL7yD-0pqZg","ControlId":"a_button_1","__type":"ActionVideo","Token":"028e85b76674457e92bc1634880b36de.48909"},{"Url":"http:\/\/dl.dropbox.com\/u\/42420335\/sample_mpeg4.mp4","ControlId":"a_button_2","__type":"ActionVideo","Token":"028e85b76674457e92bc1634880b36de.48910"},{"Url":"http:\/\/www.metacafe.com\/watch\/3472697\/example_640x480_mp4\/","ControlId":"a_button_3","__type":"ActionVideo","Token":"028e85b76674457e92bc1634880b36de.48911"},{"Url":"http:\/\/dl.dropbox.com\/u\/42420335\/sample_iTunes.mov","ControlId":"a_button_4","__type":"ActionVideo","Token":"028e85b76674457e92bc1634880b36de.48912"},{"Url":"http:\/\/bit.ly\/nRHf32","ControlId":"a_button_5","__type":"ActionVideo","Token":"028e85b76674457e92bc1634880b36de.48913"}],"Location":"http:\/\/az181270.vo.msecnd.net\/templates\/00002\/5-button.v20.zip","Id":2,"IsPrimary":true,"Version":20};

enyo.kind({
    name: "DebugTemplate",
    kind: enyo.Control,
    components: [
        {name: "output", allowHtml: "true", tag: "", classes: "" }        
    ],
    loadContent: function(json){
        this.$.output.setContent(syntaxHighlight(JSON.stringify(json), null, 4));
    }
});

enyo.kind({
    name: "RichTemplateBase",
    kind: enyo.Control,
    components: [
        {kind: "Signals", onload: "load"},
        {name: "richPayoff", kind: "DebugTemplate"}
    ],
    //This handler will catch onLoaded events
    handlers: {
     ...