diff --git a/README.md b/README.md
index 4c0f30fe..1e96f935 100755
--- a/README.md
+++ b/README.md
@@ -2,15 +2,15 @@
 JsonTree.js
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=JsonTree.js%2C%20a%20free%20JavaScript%json%20treeview&url=https://github.com/williamtroup/JsonTree.js&hashtags=javascript,treeview,json)
-[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jtree.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJsonTree.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jtree.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jJsonTree.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/JsonTree.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/JsonTree.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/)
 </h1>
 
 > <p align="center">🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.</p>
-> <p align="center">v0.1.0</p>
+> <p align="center">v0.2.0</p>
 <br />
 
 ![JsonTree.js](docs/images/main.png)
diff --git a/README_NUGET.md b/README_NUGET.md
index fd8aca03..395f75de 100755
--- a/README_NUGET.md
+++ b/README_NUGET.md
@@ -1,8 +1,8 @@
-# JsonTree.js v0.1.0
+# JsonTree.js v0.2.0
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=JsonTree.js%2C%20a%20free%20JavaScript%json%20treeview&url=https://github.com/williamtroup/JsonTree.js&hashtags=javascript,treeview,json)
-[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jtree.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJsonTree.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jtree.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jJsonTree.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/JsonTree.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/JsonTree.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/)
diff --git a/dist/jsontree.js b/dist/jsontree.js
index c28f8a0b..6a726285 100755
--- a/dist/jsontree.js
+++ b/dist/jsontree.js
@@ -1,4 +1,4 @@
-/*! JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */
+/*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */
 (function() {
   function render() {
     var tagTypes = _configuration.domElementTypes;
@@ -116,13 +116,16 @@
     }
     if (bindingOptions.sortPropertyNames) {
       properties = properties.sort();
+      if (!bindingOptions.sortPropertyNamesInAlphabeticalOrder) {
+        properties = properties.reverse();
+      }
     }
     var propertiesLength = properties.length;
     var propertyIndex = 0;
     for (; propertyIndex < propertiesLength; propertyIndex++) {
       var propertyName = properties[propertyIndex];
       if (data.hasOwnProperty(propertyName)) {
-        renderValue(objectTypeContents, bindingOptions, propertyName, data[propertyName]);
+        renderValue(objectTypeContents, bindingOptions, propertyName, data[propertyName], propertyIndex === propertiesLength - 1);
         propertyCount++;
       }
     }
@@ -134,11 +137,11 @@
     var dataIndex = 0;
     for (; dataIndex < dataLength; dataIndex++) {
       var name = bindingOptions.useZeroIndexingForArrays ? dataIndex.toString() : (dataIndex + 1).toString();
-      renderValue(objectTypeContents, bindingOptions, name, data[dataIndex]);
+      renderValue(objectTypeContents, bindingOptions, name, data[dataIndex], dataIndex === dataLength - 1);
     }
     addArrowEvent(bindingOptions, arrow, objectTypeContents);
   }
-  function renderValue(container, bindingOptions, name, value) {
+  function renderValue(container, bindingOptions, name, value, isLastItem) {
     var objectTypeValue = createElement(container, "div", "object-type-value");
     var arrow = bindingOptions.showArrowToggles ? createElement(objectTypeValue, "div", "no-arrow") : null;
     var valueElement = null;
@@ -146,16 +149,22 @@
     createElementWithHTML(objectTypeValue, "span", "split", ":");
     if (!isDefined(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "null", "null");
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedFunction(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "function", getFunctionName(value));
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedBoolean(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "boolean", value);
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedNumber(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "number", value);
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedString(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "string", bindingOptions.showStringQuotes ? '"' + value + '"' : value);
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedDate(value)) {
       valueElement = createElementWithHTML(objectTypeValue, "span", "date", getCustomFormattedDateTimeText(value, bindingOptions.dateTimeFormat));
+      createComma(bindingOptions, objectTypeValue, isLastItem);
     } else if (isDefinedObject(value) && !isDefinedArray(value)) {
       var objectTitle = createElement(objectTypeValue, "span", "object");
       var objectTypeContents = createElement(objectTypeValue, "div", "object-type-contents");
@@ -164,6 +173,7 @@
       if (bindingOptions.showCounts && propertyCount > 0) {
         createElementWithHTML(objectTitle, "span", "count", "{" + propertyCount + "}");
       }
+      createComma(bindingOptions, objectTitle, isLastItem);
     } else if (isDefinedArray(value)) {
       var arrayTitle = createElement(objectTypeValue, "span", "array");
       var arrayTypeContents = createElement(objectTypeValue, "div", "object-type-contents");
@@ -171,6 +181,7 @@
       if (bindingOptions.showCounts) {
         createElementWithHTML(arrayTitle, "span", "count", "[" + value.length + "]");
       }
+      createComma(bindingOptions, arrayTitle, isLastItem);
       renderArrayValues(arrow, arrayTypeContents, bindingOptions, value);
     }
     if (isDefined(valueElement)) {
@@ -217,6 +228,11 @@
     result = result + "()";
     return result;
   }
+  function createComma(bindingOptions, objectTypeValue, isLastItem) {
+    if (bindingOptions.showCommas && !isLastItem) {
+      createElementWithHTML(objectTypeValue, "span", "comma", ",");
+    }
+  }
   function buildAttributeOptions(newOptions) {
     var options = !isDefinedObject(newOptions) ? {} : newOptions;
     options.data = getDefaultObject(options.data, null);
@@ -229,6 +245,8 @@
     options.showTitleTreeControls = getDefaultBoolean(options.showTitleTreeControls, true);
     options.showAllAsClosed = getDefaultBoolean(options.showAllAsClosed, false);
     options.sortPropertyNames = getDefaultBoolean(options.sortPropertyNames, true);
+    options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean(options.sortPropertyNamesInAlphabeticalOrder, true);
+    options.showCommas = getDefaultBoolean(options.showCommas, false);
     options = buildAttributeOptionStrings(options);
     options = buildAttributeOptionCustomTriggers(options);
     return options;
@@ -401,6 +419,16 @@
   var _elements_Type = {};
   var _string = {empty:"", space:" "};
   var _attribute_Name_Options = "data-jsontree-options";
+  this.render = function(element, options) {
+    if (isDefinedObject(element) && isDefinedObject(options)) {
+      renderControl(renderBindingOptions(options, element));
+    }
+    return this;
+  };
+  this.renderAll = function() {
+    render();
+    return this;
+  };
   this.setConfiguration = function(newConfiguration) {
     var propertyName;
     for (propertyName in newConfiguration) {
@@ -412,7 +440,7 @@
     return this;
   };
   this.getVersion = function() {
-    return "0.1.0";
+    return "0.2.0";
   };
   (function(documentObject, windowObject, mathObject, jsonObject) {
     _parameter_Document = documentObject;
diff --git a/dist/jsontree.js.css b/dist/jsontree.js.css
index 577793e8..10c21be7 100755
--- a/dist/jsontree.js.css
+++ b/dist/jsontree.js.css
@@ -1,5 +1,5 @@
 /*
- * JsonTree.js Library v0.1.0
+ * JsonTree.js Library v0.2.0
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -130,10 +130,15 @@ div.json-tree-js div.title-bar div.title {
   font-size: 1.2rem;
 }
 div.json-tree-js div.title-bar div.controls {
-  margin-left: calc(var(--json-tree-js-spacing) * 12);
+  margin-left: calc(var(--json-tree-js-spacing) * 6);
   flex-grow: 1;
   text-align: right;
 }
+@media (min-width: 768px) {
+  div.json-tree-js div.title-bar div.controls {
+    margin-left: calc(var(--json-tree-js-spacing) * 12);
+  }
+}
 div.json-tree-js div.title-bar div.controls button {
   background-color: var(--json-tree-js-button-background-color);
   border: var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);
@@ -219,6 +224,10 @@ div.json-tree-js div.object-type-contents div.object-type-value span.function:no
   cursor: pointer;
   opacity: 0.7;
 }
+div.json-tree-js div.object-type-contents div.object-type-value span.comma {
+  color: var(--json-tree-js-color-white);
+  font-weight: var(--json-tree-js-text-bold-weight);
+}
 div.json-tree-js div.object-type-contents div.object-type-value span.boolean {
   color: var(--json-tree-js-color-boolean);
 }
diff --git a/dist/jsontree.js.css.map b/dist/jsontree.js.css.map
index b2193ce4..d27815f6 100755
--- a/dist/jsontree.js.css.map
+++ b/dist/jsontree.js.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AC3IR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;AD+HZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/jsontree.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC/DI;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;ECrEA;EACA;;ADuEI;ECxEJ;EACA;;;AD+EJ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AC9IZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ADmIZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAKZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKA;AAAA;EACI;EACA;;;AAQpB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"jsontree.js.css"}
\ No newline at end of file
diff --git a/dist/jsontree.js.min.css b/dist/jsontree.js.min.css
index bed5661c..a675c5c6 100755
--- a/dist/jsontree.js.min.css
+++ b/dist/jsontree.js.min.css
@@ -1,2 +1,2 @@
-/* JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */
-:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12);flex-grow:1;text-align:right}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}
\ No newline at end of file
+/* JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */
+:root{--json-tree-js-default-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:900;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(--json-tree-js-header-bold-weight);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:#F5F5F5;--json-tree-js-color-snow-white:#F5F5F5;--json-tree-js-color-boolean:red;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:#78b13f;--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:#F28C28;--json-tree-js-color-object:silver;--json-tree-js-color-null:#BBB;--json-tree-js-color-function:#BBB;--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(--json-tree-js-container-border-color);--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:.85rem;--json-tree-js-transition:all .3s}div.json-tree-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;box-sizing:border-box;line-height:normal;font-family:var(--json-tree-js-default-font);display:inline-block;position:relative;border-radius:var(--json-tree-js-border-radius);background-color:var(--json-tree-js-container-background-color);color:var(--json-tree-js-color-white);border:var(--json-tree-js-border-size) solid var(--json-tree-js-container-border-color);padding:var(--json-tree-js-spacing);font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);width:auto;overflow:hidden;margin:0!important}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *{box-sizing:border-box;line-height:normal}div.json-tree-js *::before,div.json-tree-js *::after{box-sizing:border-box;line-height:normal}div.json-tree-js div.no-arrow{display:inline-block;width:12px;height:8px;margin-right:calc(var(--json-tree-js-spacing))}div.json-tree-js div.down-arrow,div.json-tree-js div.right-arrow{display:inline-block;width:0;height:0;margin-right:calc(var(--json-tree-js-spacing));cursor:pointer;transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.down-arrow:hover,div.json-tree-js div.right-arrow:hover{opacity:.7}div.json-tree-js div.down-arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--json-tree-js-color-white)}div.json-tree-js div.right-arrow{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid var(--json-tree-js-color-white)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.title{text-align:left;width:auto;font-weight:var(--json-tree-js-title-bold-weight);font-size:1.2rem}div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 6);flex-grow:1;text-align:right}@media (min-width:768px){div.json-tree-js div.title-bar div.controls{margin-left:calc(var(--json-tree-js-spacing) * 12)}}div.json-tree-js div.title-bar div.controls button{background-color:var(--json-tree-js-button-background-color);border:var(--json-tree-js-border-size) solid var(--json-tree-js-button-border-color);color:var(--json-tree-js-button-text-color);border-radius:var(--json-tree-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--json-tree-js-transition)}div.json-tree-js div.title-bar div.controls button:not(.active):active{background:var(--json-tree-js-button-background-color-active)!important;color:var(--json-tree-js-button-text-color-active)!important}div.json-tree-js div.title-bar div.controls button:not(.active):hover{cursor:pointer;background:var(--json-tree-js-button-background-color-hover);color:var(--json-tree-js-button-text-color-hover)}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents{margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing) * 2)}div.json-tree-js div.object-type-contents div.object-type-value{white-space:nowrap;overflow:hidden;margin-top:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing) / 2);margin-right:calc(var(--json-tree-js-spacing) / 2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.function{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-contents div.object-type-value span.object{font-weight:var(--json-tree-js-header-bold-weight);color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.array span.count,div.json-tree-js div.object-type-contents div.object-type-value span.object span.count{margin-left:calc(var(--json-tree-js-spacing) / 2);font-weight:var(--json-tree-js-text-bold-weight)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-track{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{-webkit-box-shadow:var(--json-tree-js-border-style-scrollbar);box-shadow:var(--json-tree-js-border-style-scrollbar);background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}
\ No newline at end of file
diff --git a/dist/jsontree.min.js b/dist/jsontree.min.js
index e133da38..e8d70669 100755
--- a/dist/jsontree.min.js
+++ b/dist/jsontree.min.js
@@ -1,14 +1,15 @@
-/*! JsonTree.js v0.1.0 | (c) Bunoon 2024 | MIT License */
-(function(){function E(a){a.currentView.element.innerHTML=u.empty;T(a);if(q(a.data)&&!z(a.data)){var b=a.currentView.element,d=a.data,c=l(b,"div","object-type-title");b=l(b,"div","object-type-contents");var f=a.showArrowToggles?l(c,"div","down-arrow"):null;d=M(f,b,a,d);h(c,"span","object",g.objectText);a.showCounts&&0<d&&h(c,"span","object count","{"+d+"}")}else z(a.data)&&(b=a.currentView.element,c=a.data,d=l(b,"div","object-type-title"),b=l(b,"div","object-type-contents"),f=a.showArrowToggles?l(d,
-"div","down-arrow"):null,h(d,"span","array",g.arrayText),N(f,b,a,c),a.showCounts&&h(d,"span","array count","["+c.length+"]"))}function T(a){if(a.showTitle||a.showTitleTreeControls){var b=l(a.currentView.element,"div","title-bar");a.showTitle&&h(b,"div","title",a.titleText);if(a.showTitleTreeControls){var d=l(b,"div","controls");b=h(d,"button","openAll",g.openAllButtonText);d=h(d,"button","closeAll",g.closeAllButtonText);b.onclick=function(){a.showAllAsClosed=!1;E(a)};d.onclick=function(){a.showAllAsClosed=
-!0;E(a)}}}}function M(a,b,d,c){var f=0,k=[];for(r in c)c.hasOwnProperty(r)&&k.push(r);d.sortPropertyNames&&(k=k.sort());var r=k.length;for(var t=0;t<r;t++){var A=k[t];c.hasOwnProperty(A)&&(O(b,d,A,c[A]),f++)}P(d,a,b);return f}function N(a,b,d,c){for(var f=c.length,k=0;k<f;k++)O(b,d,d.useZeroIndexingForArrays?k.toString():(k+1).toString(),c[k]);P(d,a,b)}function O(a,b,d,c){var f=l(a,"div","object-type-value"),k=b.showArrowToggles?l(f,"div","no-arrow"):null;a=null;h(f,"span","title",d);h(f,"span","split",
-":");m(c)?B(c)?(a=c.toString().split("(")[0].split(u.space),a=h(f,"span","function",(2===a.length?a[1]:a[0])+"()")):Q(c)?a=h(f,"span","boolean",c):m(c)&&"number"===typeof c?a=h(f,"span","number",c):w(c)?a=h(f,"span","string",b.showStringQuotes?'"'+c+'"':c):q(c)&&c instanceof Date?(a=b.dateTimeFormat.replace("{hh}",C(c.getHours())),a=a.replace("{h}",c.getHours()),a=a.replace("{MM}",C(c.getMinutes())),a=a.replace("{M}",c.getMinutes()),a=a.replace("{ss}",C(c.getSeconds())),a=a.replace("{s}",c.getSeconds()),
-a=a.replace("{dd}",C(c.getDate())),a=a.replace("{d}",c.getDate()),a=a.replace("{mm}",C(c.getMonth()+1)),a=a.replace("{m}",c.getMonth()+1),a=a.replace("{yyyy}",c.getFullYear()),a=a.replace("{yyy}",c.getFullYear().toString().substring(1)),a=a.replace("{yy}",c.getFullYear().toString().substring(2)),a=a.replace("{y}",parseInt(c.getFullYear().toString().substring(2)).toString()),a=h(f,"span","date",a)):q(c)&&!z(c)?(d=l(f,"span","object"),f=l(f,"div","object-type-contents"),f=M(k,f,b,c),h(d,"span","title",
-g.objectText),b.showCounts&&0<f&&h(d,"span","count","{"+f+"}")):z(c)&&(d=l(f,"span","array"),f=l(f,"div","object-type-contents"),h(d,"span","title",g.arrayText),b.showCounts&&h(d,"span","count","["+c.length+"]"),N(k,f,b,c)):a=h(f,"span","null","null");m(a)&&U(b,a,c)}function U(a,b,d){B(a.onValueClick)?b.onclick=function(){F(a.onValueClick,d)}:b.className+=u.space+"no-hover"}function P(a,b,d){m(b)&&(b.onclick=function(){"down-arrow"===b.className?(d.style.display="none",b.className="right-arrow"):
-(d.style.display="block",b.className="down-arrow")},a.showAllAsClosed?(d.style.display="none",b.className="right-arrow"):b.className="down-arrow")}function l(a,b,d,c){b=b.toLowerCase();var f="text"===b;G.hasOwnProperty(b)||(G[b]=f?D.createTextNode(u.empty):D.createElement(b));b=G[b].cloneNode(!1);m(d)&&(b.className=d);m(c)?a.insertBefore(b,c):a.appendChild(b);return b}function h(a,b,d,c,f){a=l(a,b,d,f);a.innerHTML=c;return a}function m(a){return null!==a&&void 0!==a&&a!==u.empty}function q(a){return m(a)&&
-"object"===typeof a}function Q(a){return m(a)&&"boolean"===typeof a}function w(a){return m(a)&&"string"===typeof a}function B(a){return m(a)&&"function"===typeof a}function z(a){return q(a)&&a instanceof Array}function F(a){B(a)&&a.apply(null,[].slice.call(arguments,1))}function x(a,b){return w(a)?a:b}function p(a,b){return Q(a)?a:b}function H(a,b){return B(a)?a:b}function V(a){var b=!0,d=null;try{w(a)&&(d=R.parse(a))}catch(c){try{d=eval("("+a+")"),B(d)&&(d=d())}catch(f){g.safeMode||(console.error("Errors in object: "+
-c.message+", "+f.message),b=!1),d=null}}return{parsed:b,result:d}}function C(a){a=a.toString();return 1===a.length?"0"+a:a}function S(a){g=q(a)?a:{};g.safeMode=p(g.safeMode,!0);a=g;var b=g.domElementTypes,d=["*"];w(b)?(b=b.split(u.space),0===b.length&&(b=d)):b=z(b)?b:d;a.domElementTypes=b;g.objectText=x(g.objectText,"object");g.arrayText=x(g.arrayText,"array");g.closeAllButtonText=x(g.closeAllButtonText,"Close All");g.openAllButtonText=x(g.openAllButtonText,"Open All")}var D=null,I=null,J=null,R=
-null,g={},G={},u={empty:"",space:" "};this.setConfiguration=function(a){for(var b in a)a.hasOwnProperty(b)&&(g[b]=a[b]);S(g);return this};this.getVersion=function(){return"0.1.0"};(function(a,b,d,c){D=a;I=b;J=d;R=c;S();D.addEventListener("DOMContentLoaded",function(){for(var f=g.domElementTypes,k=f.length,r=0;r<k;r++){var t=D.getElementsByTagName(f[r]);t=[].slice.call(t);for(var A=t.length,K=0;K<A;K++){var y=t[K],L=!0;if(m(y)&&y.hasAttribute("data-jsontree-options")){var e=y.getAttribute("data-jsontree-options");
-if(w(e))if(e=V(e),e.parsed&&q(e.result)){e=e.result;var v=e=q(e)?e:{};var n=e.data;n=q(n)?n:null;v.data=n;e.showCounts=p(e.showCounts,!0);e.useZeroIndexingForArrays=p(e.useZeroIndexingForArrays,!0);e.dateTimeFormat=x(e.dateTimeFormat,"{yyyy}-{mm}-{dd}T{hh}:{MM}:{ss}Z");e.showArrowToggles=p(e.showArrowToggles,!0);e.showStringQuotes=p(e.showStringQuotes,!0);e.showTitle=p(e.showTitle,!0);e.showTitleTreeControls=p(e.showTitleTreeControls,!0);e.showAllAsClosed=p(e.showAllAsClosed,!1);e.sortPropertyNames=
-p(e.sortPropertyNames,!0);e.titleText=x(e.titleText,"JsonTree.js");e.onBeforeRender=H(e.onBeforeRender,null);e.onRenderComplete=H(e.onRenderComplete,null);e.onValueClick=H(e.onValueClick,null);e.currentView={};e.currentView.element=y;F(e.onBeforeRender,e.element);if(!w(e.currentView.element.id)){y=e.currentView.element;v=[];for(n=0;32>n;n++){8!==n&&12!==n&&16!==n&&20!==n||v.push("-");var W=J.floor(16*J.random()).toString(16);v.push(W)}v=v.join(u.empty);y.id=v}e.currentView.element.className="json-tree-js";
-e.currentView.element.removeAttribute("data-jsontree-options");E(e);F(e.onRenderComplete,e.currentView.element)}else g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),L=!1);else g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),L=!1)}if(!L)break}}});m(I.$jsontree)||(I.$jsontree=this)})(document,window,Math,JSON)})();
\ No newline at end of file
+/*! JsonTree.js v0.2.0 | (c) Bunoon 2024 | MIT License */
+(function(){function H(){for(var a=g.domElementTypes,c=a.length,b=0;b<c;b++){var d=x.getElementsByTagName(a[b]);d=[].slice.call(d);for(var f=d.length,e=0;e<f;e++){var l=d[e],r=!0;if(m(l)&&l.hasAttribute("data-jsontree-options")){var p=l.getAttribute("data-jsontree-options");v(p)?(p=R(p),p.parsed&&q(p.result)?I(J(p.result,l)):g.safeMode||(console.error("The attribute 'data-jsontree-options' is not a valid object."),r=!1)):g.safeMode||(console.error("The attribute 'data-jsontree-options' has not been set correctly."),
+r=!1)}if(!r)break}}}function J(a,c){var b,d=b=q(a)?a:{};var f=b.data;f=q(f)?f:null;d.data=f;b.showCounts=n(b.showCounts,!0);b.useZeroIndexingForArrays=n(b.useZeroIndexingForArrays,!0);b.dateTimeFormat=w(b.dateTimeFormat,"{yyyy}-{mm}-{dd}T{hh}:{MM}:{ss}Z");b.showArrowToggles=n(b.showArrowToggles,!0);b.showStringQuotes=n(b.showStringQuotes,!0);b.showTitle=n(b.showTitle,!0);b.showTitleTreeControls=n(b.showTitleTreeControls,!0);b.showAllAsClosed=n(b.showAllAsClosed,!1);b.sortPropertyNames=n(b.sortPropertyNames,
+!0);b.sortPropertyNamesInAlphabeticalOrder=n(b.sortPropertyNamesInAlphabeticalOrder,!0);b.showCommas=n(b.showCommas,!1);b.titleText=w(b.titleText,"JsonTree.js");b.onBeforeRender=B(b.onBeforeRender,null);b.onRenderComplete=B(b.onRenderComplete,null);b.onValueClick=B(b.onValueClick,null);b.currentView={};b.currentView.element=c;return b}function I(a){C(a.onBeforeRender,a.element);if(!v(a.currentView.element.id)){var c=a.currentView.element;var b=[];for(var d=0;32>d;d++){8!==d&&12!==d&&16!==d&&20!==
+d||b.push("-");var f=D.floor(16*D.random()).toString(16);b.push(f)}b=b.join(u.empty);c.id=b}a.currentView.element.className="json-tree-js";a.currentView.element.removeAttribute("data-jsontree-options");E(a);C(a.onRenderComplete,a.currentView.element)}function E(a){a.currentView.element.innerHTML=u.empty;S(a);if(q(a.data)&&!y(a.data)){var c=a.currentView.element,b=a.data,d=k(c,"div","object-type-title");c=k(c,"div","object-type-contents");var f=a.showArrowToggles?k(d,"div","down-arrow"):null;b=K(f,
+c,a,b);h(d,"span","object",g.objectText);a.showCounts&&0<b&&h(d,"span","object count","{"+b+"}")}else y(a.data)&&(c=a.currentView.element,d=a.data,b=k(c,"div","object-type-title"),c=k(c,"div","object-type-contents"),f=a.showArrowToggles?k(b,"div","down-arrow"):null,h(b,"span","array",g.arrayText),L(f,c,a,d),a.showCounts&&h(b,"span","array count","["+d.length+"]"))}function S(a){if(a.showTitle||a.showTitleTreeControls){var c=k(a.currentView.element,"div","title-bar");a.showTitle&&h(c,"div","title",
+a.titleText);if(a.showTitleTreeControls){var b=k(c,"div","controls");c=h(b,"button","openAll",g.openAllButtonText);b=h(b,"button","closeAll",g.closeAllButtonText);c.onclick=function(){a.showAllAsClosed=!1;E(a)};b.onclick=function(){a.showAllAsClosed=!0;E(a)}}}}function K(a,c,b,d){var f=0,e=[];for(l in d)d.hasOwnProperty(l)&&e.push(l);b.sortPropertyNames&&(e=e.sort(),b.sortPropertyNamesInAlphabeticalOrder||(e=e.reverse()));var l=e.length;for(var r=0;r<l;r++){var p=e[r];d.hasOwnProperty(p)&&(M(c,b,
+p,d[p],r===l-1),f++)}N(b,a,c);return f}function L(a,c,b,d){for(var f=d.length,e=0;e<f;e++)M(c,b,b.useZeroIndexingForArrays?e.toString():(e+1).toString(),d[e],e===f-1);N(b,a,c)}function M(a,c,b,d,f){var e=k(a,"div","object-type-value"),l=c.showArrowToggles?k(e,"div","no-arrow"):null;a=null;h(e,"span","title",b);h(e,"span","split",":");m(d)?z(d)?(a=d.toString().split("(")[0].split(u.space),a=h(e,"span","function",(2===a.length?a[1]:a[0])+"()"),t(c,e,f)):O(d)?(a=h(e,"span","boolean",d),t(c,e,f)):m(d)&&
+"number"===typeof d?(a=h(e,"span","number",d),t(c,e,f)):v(d)?(a=h(e,"span","string",c.showStringQuotes?'"'+d+'"':d),t(c,e,f)):q(d)&&d instanceof Date?(a=c.dateTimeFormat.replace("{hh}",A(d.getHours())),a=a.replace("{h}",d.getHours()),a=a.replace("{MM}",A(d.getMinutes())),a=a.replace("{M}",d.getMinutes()),a=a.replace("{ss}",A(d.getSeconds())),a=a.replace("{s}",d.getSeconds()),a=a.replace("{dd}",A(d.getDate())),a=a.replace("{d}",d.getDate()),a=a.replace("{mm}",A(d.getMonth()+1)),a=a.replace("{m}",d.getMonth()+
+1),a=a.replace("{yyyy}",d.getFullYear()),a=a.replace("{yyy}",d.getFullYear().toString().substring(1)),a=a.replace("{yy}",d.getFullYear().toString().substring(2)),a=a.replace("{y}",parseInt(d.getFullYear().toString().substring(2)).toString()),a=h(e,"span","date",a),t(c,e,f)):q(d)&&!y(d)?(b=k(e,"span","object"),e=k(e,"div","object-type-contents"),e=K(l,e,c,d),h(b,"span","title",g.objectText),c.showCounts&&0<e&&h(b,"span","count","{"+e+"}"),t(c,b,f)):y(d)&&(b=k(e,"span","array"),e=k(e,"div","object-type-contents"),
+h(b,"span","title",g.arrayText),c.showCounts&&h(b,"span","count","["+d.length+"]"),t(c,b,f),L(l,e,c,d)):(a=h(e,"span","null","null"),t(c,e,f));m(a)&&T(c,a,d)}function T(a,c,b){z(a.onValueClick)?c.onclick=function(){C(a.onValueClick,b)}:c.className+=u.space+"no-hover"}function N(a,c,b){m(c)&&(c.onclick=function(){"down-arrow"===c.className?(b.style.display="none",c.className="right-arrow"):(b.style.display="block",c.className="down-arrow")},a.showAllAsClosed?(b.style.display="none",c.className="right-arrow"):
+c.className="down-arrow")}function t(a,c,b){a.showCommas&&!b&&h(c,"span","comma",",")}function k(a,c,b,d){c=c.toLowerCase();var f="text"===c;F.hasOwnProperty(c)||(F[c]=f?x.createTextNode(u.empty):x.createElement(c));c=F[c].cloneNode(!1);m(b)&&(c.className=b);m(d)?a.insertBefore(c,d):a.appendChild(c);return c}function h(a,c,b,d,f){a=k(a,c,b,f);a.innerHTML=d;return a}function m(a){return null!==a&&void 0!==a&&a!==u.empty}function q(a){return m(a)&&"object"===typeof a}function O(a){return m(a)&&"boolean"===
+typeof a}function v(a){return m(a)&&"string"===typeof a}function z(a){return m(a)&&"function"===typeof a}function y(a){return q(a)&&a instanceof Array}function C(a){z(a)&&a.apply(null,[].slice.call(arguments,1))}function w(a,c){return v(a)?a:c}function n(a,c){return O(a)?a:c}function B(a,c){return z(a)?a:c}function R(a){var c=!0,b=null;try{v(a)&&(b=P.parse(a))}catch(d){try{b=eval("("+a+")"),z(b)&&(b=b())}catch(f){g.safeMode||(console.error("Errors in object: "+d.message+", "+f.message),c=!1),b=null}}return{parsed:c,
+result:b}}function A(a){a=a.toString();return 1===a.length?"0"+a:a}function Q(a){g=q(a)?a:{};g.safeMode=n(g.safeMode,!0);a=g;var c=g.domElementTypes,b=["*"];v(c)?(c=c.split(u.space),0===c.length&&(c=b)):c=y(c)?c:b;a.domElementTypes=c;g.objectText=w(g.objectText,"object");g.arrayText=w(g.arrayText,"array");g.closeAllButtonText=w(g.closeAllButtonText,"Close All");g.openAllButtonText=w(g.openAllButtonText,"Open All")}var x=null,G=null,D=null,P=null,g={},F={},u={empty:"",space:" "};this.render=function(a,
+c){q(a)&&q(c)&&I(J(c,a));return this};this.renderAll=function(){H();return this};this.setConfiguration=function(a){for(var c in a)a.hasOwnProperty(c)&&(g[c]=a[c]);Q(g);return this};this.getVersion=function(){return"0.2.0"};(function(a,c,b,d){x=a;G=c;D=b;P=d;Q();x.addEventListener("DOMContentLoaded",function(){H()});m(G.$jsontree)||(G.$jsontree=this)})(document,window,Math,JSON)})();
\ No newline at end of file
diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md
index 8d08fe4f..be535061 100755
--- a/docs/CHANGE_LOG.md
+++ b/docs/CHANGE_LOG.md
@@ -1,4 +1,24 @@
 # JsonTree.js - Change Log:
 
+## Version 0.2.0:
+
+#### **Binding Options:**
+- Added a new binding option called "sortPropertyNamesInAlphabeticalOrder", which states if the sorted property names for an object should be in alphabetical order (defaults to true).
+- Added a new binding option called "showCommas", which states if commas should be shown at the end of each line (defaults to false).
+
+#### **Public Functions:**
+- Added new public function "render()", which will render a specific DOM element using the options you specify.
+- Added new public function "renderAll()", which will find all new DOM elements with the "data-jsontree-options" attribute and render them.
+
+#### **UI Improvements:**
+- The spacing used for the title bar buttons is now smaller when viewed on a mobile.
+
+#### **Documentation:**
+- Fixed some spelling and grammar mistakes in the documentation.
+- Minor improvements to the documentation layout.
+
+<br>
+
+
 ## Version 0.1.0:
 - Everything :)
\ No newline at end of file
diff --git a/docs/PUBLIC_FUNCTIONS.md b/docs/PUBLIC_FUNCTIONS.md
index 394ea3fa..d17a24d7 100755
--- a/docs/PUBLIC_FUNCTIONS.md
+++ b/docs/PUBLIC_FUNCTIONS.md
@@ -5,6 +5,26 @@ Below is a list of all the public functions that can be called from the JsonTree
 <br>
 
 
+## Manage Instances:
+
+### **render( *element*, *options* )**:
+Renders an element using the options specified.
+<br>
+***Parameter: element***: '*Object*' - The element to render.
+<br>
+***Parameter: options***: '*Object*' - The options to use (refer to ["Binding Options"](binding/OPTIONS.md) documentation for properties).
+<br>
+***Returns***: '*Object*' - The JsonTree.js class instance.
+<br>
+
+### **renderAll()**:
+Finds all new elements and renders them.
+<br>
+***Returns***: '*Object*' - The JsonTree.js class instance.
+<br>
+<br>
+
+
 ## Configuration:
 
 ### **setConfiguration( *newConfiguration* )**:
diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md
index c9d8b4cb..a9391564 100755
--- a/docs/binding/OPTIONS.md
+++ b/docs/binding/OPTIONS.md
@@ -1,10 +1,11 @@
 # JsonTree.js - Binding Options:
 
 Below are all the JSON properties that can be passed in the "data-jsontree-options" binding attribute for a DOM element.
+<br>
+<br>
 
 
 ## Standard Options:
-<br/>
 
 | Type: | Name: | Description: |
 | --- | --- | --- |
@@ -16,20 +17,21 @@ Below are all the JSON properties that can be passed in the "data-jsontree-optio
 | *boolean* | showStringQuotes | States if quotes should be shown around string values (defaults to true). |
 | *boolean* | showTitle | States if the title should be shown (defaults to true). |
 | *boolean* | showTitleTreeControls | States if the tree control button should be shown in the title bar (defaults to true). |
-| *boolean* | showAllAsClosed | States if all the notes should be closed when first rendered (defaults to false). |
-| *boolean* | sortPropertyNames | States if the property names for an object should be sorted in alphabetical order (defaults to true). |
+| *boolean* | showAllAsClosed | States if all the nodes should be closed when first rendered (defaults to false). |
+| *boolean* | sortPropertyNames | States if the property names for an object should be sorted (defaults to true). |
+| *boolean* | sortPropertyNamesInAlphabeticalOrder | States if the sorted property names for an object should be in alphabetical order (defaults to true). |
+| *boolean* | showCommas | States if commas should be shown at the end of each line (defaults to false). |
 
-<br/>
+<br>
 
 
 ## String Options:
-<br/>
 
 | Type: | Name: | Description: |
 | --- | --- | --- |
 | *string* | titleText | The text that should be displayed for the "JsonTree.js" title bar label. |
 
-<br/>
+<br>
 
 
 ## Binding Example:
diff --git a/docs/configuration/OPTIONS.md b/docs/configuration/OPTIONS.md
index 1ef8b2ac..24b948e1 100755
--- a/docs/configuration/OPTIONS.md
+++ b/docs/configuration/OPTIONS.md
@@ -1,8 +1,8 @@
 # JsonTree.js - Configuration - Options:
 
 Below are all the configuration options that can be passed to the "setConfiguration()" public function.
-<br/>
-<br/>
+<br>
+<br>
 
 
 ### Options:
@@ -12,7 +12,7 @@ Below are all the configuration options that can be passed to the "setConfigurat
 | *boolean* | safeMode | States if safe-mode is enabled (errors will be ignored and logged only, defaults to true). |
 | *Object* | highlightAllDomElementTypes | The DOM element types to lookup (can be either an array of strings, or a space separated string, and defaults to "*"). |
 
-<br/>
+<br>
 
 
 ### Options - Strings:
@@ -24,11 +24,10 @@ Below are all the configuration options that can be passed to the "setConfigurat
 | *string* | closeAllButtonText | The text that should be shown for the "Close All" button text. |
 | *string* | openAllButtonText | The text that should be shown for the "Open All" button text. |
 
-<br/>
+<br>
 
 
 ## Example:
-<br/>
 
 ```markdown
 <script> 
diff --git a/jsontree.js.nuspec b/jsontree.js.nuspec
index fb27da64..58153d4c 100755
--- a/jsontree.js.nuspec
+++ b/jsontree.js.nuspec
@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
     <metadata>
         <id>jJsonTree.js</id>
-        <version>0.1.0</version>
+        <version>0.2.0</version>
         <title>JsonTree.js</title>
         <description>A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.</description>
         <authors>William Troup</authors>
diff --git a/package.json b/package.json
index f6e7776c..a911a305 100755
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "jjsontree.js",
     "title": "JsonTree.js",
     "description": "A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "main": "dist/jsontree.js",
     "homepage": "https://www.william-troup.com/jsontree-js/",
     "author": {
diff --git a/src/jsontree.js b/src/jsontree.js
index c2cb2fd0..87562386 100755
--- a/src/jsontree.js
+++ b/src/jsontree.js
@@ -4,7 +4,7 @@
  * A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
  * 
  * @file        jsontree.js
- * @version     v0.1.0
+ * @version     v0.2.0
  * @author      Bunoon
  * @license     MIT License
  * @copyright   Bunoon 2024
@@ -202,6 +202,10 @@
 
         if ( bindingOptions.sortPropertyNames ) {
             properties = properties.sort();
+
+            if ( !bindingOptions.sortPropertyNamesInAlphabeticalOrder ) {
+                properties = properties.reverse();
+            }
         }
 
         var propertiesLength = properties.length;
@@ -210,7 +214,7 @@
             var propertyName = properties[ propertyIndex ];
 
             if ( data.hasOwnProperty( propertyName ) ) {
-                renderValue( objectTypeContents, bindingOptions, propertyName, data[ propertyName ] );
+                renderValue( objectTypeContents, bindingOptions, propertyName, data[ propertyName ], propertyIndex === propertiesLength - 1 );
                 propertyCount++;
             }
         }
@@ -226,13 +230,13 @@
         for ( var dataIndex = 0; dataIndex < dataLength; dataIndex++ ) {
             var name = bindingOptions.useZeroIndexingForArrays ? dataIndex.toString() : ( dataIndex + 1 ).toString();
 
-            renderValue( objectTypeContents, bindingOptions, name, data[ dataIndex ] );
+            renderValue( objectTypeContents, bindingOptions, name, data[ dataIndex ], dataIndex === dataLength - 1 );
         }
 
         addArrowEvent( bindingOptions, arrow, objectTypeContents );
     }
 
-    function renderValue( container, bindingOptions, name, value ) {
+    function renderValue( container, bindingOptions, name, value, isLastItem ) {
         var objectTypeValue = createElement( container, "div", "object-type-value" ),
             arrow = bindingOptions.showArrowToggles ? createElement( objectTypeValue, "div", "no-arrow" ) : null,
             valueElement = null;
@@ -243,21 +247,32 @@
         if ( !isDefined( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "null", "null" );
 
+            createComma( bindingOptions, objectTypeValue, isLastItem );
+
         } else if ( isDefinedFunction( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "function", getFunctionName( value ) );
+            
+            createComma( bindingOptions, objectTypeValue, isLastItem );
 
         }  else if ( isDefinedBoolean( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "boolean", value );
+            
+            createComma( bindingOptions, objectTypeValue, isLastItem );
 
         } else if ( isDefinedNumber( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "number", value );
+            
+            createComma( bindingOptions, objectTypeValue, isLastItem );
 
         } else if ( isDefinedString( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "string", bindingOptions.showStringQuotes ? "\"" + value + "\"" : value );
+            
+            createComma( bindingOptions, objectTypeValue, isLastItem );
 
         } else if ( isDefinedDate( value ) ) {
             valueElement = createElementWithHTML( objectTypeValue, "span", "date", getCustomFormattedDateTimeText( value, bindingOptions.dateTimeFormat ) );
-            
+            createComma( bindingOptions, objectTypeValue, isLastItem );
+
         } else if ( isDefinedObject( value ) && !isDefinedArray( value ) ) {
             var objectTitle = createElement( objectTypeValue, "span", "object" ),
                 objectTypeContents = createElement( objectTypeValue, "div", "object-type-contents" ),
@@ -269,6 +284,8 @@
                 createElementWithHTML( objectTitle, "span", "count", "{" + propertyCount + "}" );
             }
 
+            createComma( bindingOptions, objectTitle, isLastItem );
+
         } else if ( isDefinedArray( value ) ) {
             var arrayTitle = createElement( objectTypeValue, "span", "array" ),
                 arrayTypeContents = createElement( objectTypeValue, "div", "object-type-contents" );
@@ -279,6 +296,7 @@
                 createElementWithHTML( arrayTitle, "span", "count", "[" + value.length + "]" );
             }
 
+            createComma( bindingOptions, arrayTitle, isLastItem );
             renderArrayValues( arrow, arrayTypeContents, bindingOptions, value );
         }
 
@@ -335,6 +353,12 @@
         return result;
     }
 
+    function createComma( bindingOptions, objectTypeValue, isLastItem ) {
+        if ( bindingOptions.showCommas && !isLastItem ) {
+            createElementWithHTML( objectTypeValue, "span", "comma", "," );
+        }
+    }
+
 
     /*
      * ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@@ -354,6 +378,8 @@
         options.showTitleTreeControls = getDefaultBoolean( options.showTitleTreeControls, true );
         options.showAllAsClosed = getDefaultBoolean( options.showAllAsClosed, false );
         options.sortPropertyNames = getDefaultBoolean( options.sortPropertyNames, true );
+        options.sortPropertyNamesInAlphabeticalOrder = getDefaultBoolean( options.sortPropertyNamesInAlphabeticalOrder, true );
+        options.showCommas = getDefaultBoolean( options.showCommas, false );
 
         options = buildAttributeOptionStrings( options );
         options = buildAttributeOptionCustomTriggers( options );
@@ -607,6 +633,48 @@
     }
 
 
+    /*
+     * ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+     * Public Functions:  Manage Instances
+     * ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+     */
+
+    /**
+     * render().
+     * 
+     * Renders an element using the options specified.
+     * 
+     * @public
+     * 
+     * @param       {Object}    element                                     The element to render.
+     * @param       {Object}    options                                     The options to use (refer to "Binding Options" documentation for properties).
+     * 
+     * @returns     {Object}                                                The JsonTree.js class instance.
+     */
+    this.render = function( element, options ) {
+        if ( isDefinedObject( element ) && isDefinedObject( options ) ) {
+            renderControl( renderBindingOptions( options, element ) );
+        }
+
+        return this;
+    };
+
+    /**
+     * renderAll().
+     * 
+     * Finds all new elements and renders them.
+     * 
+     * @public
+     * 
+     * @returns     {Object}                                                The JsonTree.js class instance.
+     */
+    this.renderAll = function() {
+        render();
+
+        return this;
+    };
+
+
     /*
      * ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
      * Public Functions:  Configuration
@@ -668,7 +736,7 @@
      * @returns     {string}                                                The version number.
      */
     this.getVersion = function() {
-        return "0.1.0";
+        return "0.2.0";
     };
 
 
diff --git a/src/jsontree.js.scss b/src/jsontree.js.scss
index 831c8313..ada35503 100755
--- a/src/jsontree.js.scss
+++ b/src/jsontree.js.scss
@@ -1,5 +1,5 @@
 /*
- * JsonTree.js Library v0.1.0
+ * JsonTree.js Library v0.2.0
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -158,10 +158,14 @@ div.json-tree-js {
         }
 
         div.controls {
-            margin-left: calc( var(--json-tree-js-spacing) * 12 );
+            margin-left: calc( var(--json-tree-js-spacing) * 6 );
             flex-grow: 1;
             text-align: right;
 
+            @media (min-width: $minimum-width) { 
+                margin-left: calc( var(--json-tree-js-spacing) * 12 );
+            }
+
             @include buttons;
         }
     }
@@ -241,6 +245,11 @@ div.json-tree-js {
                 }
             }
 
+            span.comma {
+                color: var(--json-tree-js-color-white);
+                font-weight: var(--json-tree-js-text-bold-weight);
+            }
+
             span.boolean {
                 color: var(--json-tree-js-color-boolean);
             }
diff --git a/test/dist/jsontree.js.bootstrap.html b/test/dist/jsontree.js.bootstrap.html
index 90433cc7..86de7f1f 100755
--- a/test/dist/jsontree.js.bootstrap.html
+++ b/test/dist/jsontree.js.bootstrap.html
@@ -13,14 +13,22 @@
     <body>
         <div class="header">
             <h1 id="header">JsonTree.js - Bootstrap</h1>
-            <p>This is a basic example of how to use JsonTree.js ... alongside Bootstrap.</p>
+            <p>This is a basic example of how to use JsonTree.js alongside Bootstrap.</p>
         </div>
 
         <div class="contents">
             <div id="json-tree-1" data-jsontree-options="bindingOptions"></div>
+            <br />
+            <br />
+            <div id="json-tree-2"></div>
         </div>
 
         <div class="contents">
+            <h2>Manage Instances:</h2>
+            <button class="btn btn-primary" onclick="$jsontree.render( document.getElementById( 'json-tree-2' ), bindingOptions() );">Render</button>
+            <button class="btn btn-primary" onclick="$jsontree.renderAll();">Render All</button>
+            <br />
+
             <h2>Configuration:</h2>
             <button class="btn btn-primary" onclick="setupConfiguration();">Set Configuration</button>
             <br />
diff --git a/test/dist/jsontree.js.min.html b/test/dist/jsontree.js.min.html
index f21b9452..e89d8c68 100755
--- a/test/dist/jsontree.js.min.html
+++ b/test/dist/jsontree.js.min.html
@@ -12,7 +12,7 @@
     <body>
         <div class="header">
             <h1 id="header">JsonTree.js - Minimized</h1>
-            <p>This is a basic example of how to use JsonTree.js.</p>
+            <p>This is a basic example of how to use JsonTree.js from minimized files.</p>
         </div>
 
         <div class="contents">
diff --git a/test/src/jsontree.js.bootstrap.html b/test/src/jsontree.js.bootstrap.html
index 95e7a404..f6bc8293 100755
--- a/test/src/jsontree.js.bootstrap.html
+++ b/test/src/jsontree.js.bootstrap.html
@@ -13,14 +13,22 @@
     <body>
         <div class="header">
             <h1 id="header">JsonTree.js - Bootstrap</h1>
-            <p>This is a basic example of how to use JsonTree.js ... alongside Bootstrap.</p>
+            <p>This is a basic example of how to use JsonTree.js alongside Bootstrap.</p>
         </div>
 
         <div class="contents">
             <div id="json-tree-1" data-jsontree-options="bindingOptions"></div>
+            <br />
+            <br />
+            <div id="json-tree-2"></div>
         </div>
 
         <div class="contents">
+            <h2>Manage Instances:</h2>
+            <button class="btn btn-primary" onclick="$jsontree.render( document.getElementById( 'json-tree-2' ), bindingOptions() );">Render</button>
+            <button class="btn btn-primary" onclick="$jsontree.renderAll();">Render All</button>
+            <br />
+
             <h2>Configuration:</h2>
             <button class="btn btn-primary" onclick="setupConfiguration();">Set Configuration</button>
             <br />