JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="https://raw.github.com/vjeux/XSON/master/src/xson.js"></script>

<xson>
    <o>
        <o k="widget">
            <s k="debug">on</s>
            <a k="objects">
                <o>
                    <s k="title">Sample Konfabulator Widget</s>
                    <s k="name">main_window</s>
                    <n k="width">500</n>
                    <n k="height">500</n>
                </o>
                <o>
                    <s k="src">Images/Sun.png</s>
                    <s k="name">sun1</s>
                    <n k="hOffset">250</n>
                    <n k="vOffset">250</n>
                    <s k="alignment">center</s>
                </o>
                <o>
                    <s k="data">Click Here</s>
                    <n k="size">36</n>
                    <s k="style">bold</s>
                    <s k="name">text1</s>
                    <n k="hOffset">250</n>
                    <n k="vOffset">100</n>
                    <s k="alignment">center</s>
                    <s k="onMouseUp">sun1.opacity = (sun1.opacity / 100) * 90;</s>
                </o>
            </a>
        </o>
    </o> 
</xson>

CSS

xson * { display: block; text-decoration: none; margin-left: 20px; }

xson *[k]:before { content: '"' attr(k) '": '; }
xson *[k]:last-child:after { content: ''; }
xson *[k]:after { content: ','; }

xson t:after, xson t[k]:last-child:after { content: 'true'; }
xson t[k]:after { content: 'true,'; }

xson f:after, xson f[k]:last-child:after { content: 'false'; }
xson f[k]:after { content: 'false,'; }

xson l:after, xson l[k]:last-child:after { content: 'null'; }
xson l[k]:after { content: 'null,'; }

xson s[k]:before { content: '"' attr(k) '": "'; }
xson s:after, s[k]:last-child:after { content: '"'; }
xson s[k]:after { content: '",'; }

xson o:before { content: '{' }
xson o[k]:before { content: '"' attr(k) '": {'; }
xson o:last-child:after, xson o[k]:last-child:after { content: '}'; }
xson o:after, xson o[k]:after { content: '},'; }

xson a:before { content: '[' }
xson a[k]:before { content: '"' attr(k) '": ['; }
xson a:last-child:after, xson a[k]:last-child:after { content: ']'; }
xson a:after, xson a[k]:after { content: '],'; }

JavaScript

// Open the console!

var xson = document.getElementsByTagName('xson')[0];

// All numbers
console.log(xson.querySelectorAll('n'));

// All 'name' keys
console.log(xson.querySelectorAll('[k=name]'));

// The first element of the array 'objects'
console.log(xson.querySelector('a[k=objects] > :first-child'));

// All the numbers equal to 500 thanks to jQuery special :contains selector
console.log($('n:contains(500)', xson));

console.log('JSON', XSON.parse(xson.innerHTML));