Tree Style XML Viewer & Formatter - jQuery simpleXML

The simpleXML jQuery plugin dynamically formats and renders your XML data in a collapsible tree view format for better readability.

Your users are able to collapse and expand nodes by clicking/tapping the arrows. Syntax highlighting is supported as well.

How to use it:

1. Insert the jQuery simpleXML plugin's JavaScript and CSS files into the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/simpleXML.js"></script>
<link rel="stylesheet" href="css/simpleXML.css">

2. Create a container element to place the formatted XML data.

<div id="simpleUseCase"></div>

3. Call the function on the container element and specify the XML object to format.

var xml = "<description><of>Hello</of><og /><blob> </blob><!--  Comment here --><![CDATA[sdfsdf]]><childNode><bob>fd<bob2></bob2><bob21 /></bob></childNode><!--Second Comment--></description>";

$("#simpleUseCase").simpleXML({ 
  xmlString: xml 
});

4. Specify the character to be shown when the node is collapsed. Defaults to '...'

$("#simpleUseCase").simpleXML({ 
  xmlString: xml,
  collapsedText: "..."
});

Changelog:

2019-02-19

• Addition of support for attributes

---

This awesome jQuery plugin is developed by borsuksoftware. For more Advanced Usages, please check the demo page or visit the official website.