gistfile1.js

<!-- Defiant template -->
<script type="defiant/xsl-template">

<xsl:template name="tree">
    <h1>Tree</h1>
    <xsl:call-template name="tree-walker"/>
</xsl:template>

<xsl:template name="tree-walker">
    <xsl:param name="indent" />
    <xsl:for-each select="./*">
        <xsl:sort order="descending" select="count(./*)"/>
        <div class="tree-item">
            <xsl:value-of select="$indent"/> <xsl:value-of select="@name"/>
            <xsl:if test="count(./*) > 0">
                <div class="item-children">
                    <xsl:call-template name="tree-walker">
                        <xsl:with-param name="indent">
                            <xsl:value-of select="$indent"/>&#160;&#160;
                        </xsl:with-param>
                    </xsl:call-template>
                </div>
            </xsl:if>
        </div>
    </xsl:for-each>
</xsl:template>

</script>

<!-- Output element -->
<pre id="output"></pre>

<script type="text/javascript">

var obj = {
    "item": [
            {
                "@name": "content",
                "item": [
                    {
                        "@name": "js",
                        "item": { "@name": "defiant.js" }
                    },
                    {
                        "@name": "css",
                        "item": [
                            { "@name": "style.css" },
                            { "@name": "style.less" }
                        ]
                    },
                    {
                        "@name": "image",
                        "item": [
                            { "@name": "logo.png" },
                            { "@name": "sprite.png" }
                        ]
                    }
                ]
            },
            { "@name": "readme.txt" },
            { "@name": "config.php" },
            { "@name": "index.htm" }
        ]
    },
    htm = Defiant.render('tree', obj),
    doc = JSON.toXML( obj );

document.getElementById('output').innerHTML = htm;

</script>