💡 The js site ui tool to render a multilevel nested objects json.
| 📖️ Library | @jaisocx/tree |
🏷️ ver.: 2.2.22 |
| 🗓 Updated | Winter 2026 | Tue Jan 20 06:28:29 CET 2026 |
| 📐 Size | 🗂 Folder: _ KB | 📦 Tarball: _ KB | 📋 .js: _ KB |
| ⚡ JS Engine | 🌐 Browser: ✅ yes | 🧭 Express: ❌ no | 🖥️ Console: ❌ no |
💡 The js site ui tool to render a multilevel nested objects json.
Need first webpack bundle.js, and to reference in tag script in html page.
<h1>Tree example</h1>
<div id="example-tree-holder"></div>
<!-- SCRIPT TO RENDER JSON IN TREE VIEW -->
<script>
let glob_TreeClassInstance = new Object();
// JS VARIABLE JSON TO RENDER IN TREE VIEW
const treeJsonData = [
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/house.png",
"label": "Main",
"opened": false,
"text": "<h3>Main tree elem</h3>",
"subtree": [
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/google.png",
"label": "A Link to Google",
"href": "https://google.com/",
"cssClassName": "hyperlink"
},
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/github.png",
"label": "A Link to GitHub",
"href": "https://github.com/orgs/Jaisocx-Tools/repositories",
"cssClassName": "hyperlink"
},
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/catalog.png",
"label": "echo html",
"opened": false,
"subtree": [
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
"label": "html 1",
"href": "javascript: void(0);",
"text": "<h3>Hello World!</h3><p style=\"color:#26d;\">Have fun with styling and using JSTree tool.</p>"
},
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
"label": "html 2",
"href": "javascript: void(0);",
"text": "<h3>Hello World!</h3><p style=\"color:#d83;\">You can edit code easily, JSTree class is lightweight.</p>"
},
{
"icon": "webpack_builds/ExampleTree/home_tree_mode_conf/html.png",
"label": "html 3",
"href": "javascript: void(0);",
"text": "<h3>Hello World!</h3><p style=\"color:#00bb00;\">Have a nice day.</p>"
}
]
}
]
}
];
document.addEventListener('DOMContentLoaded', () => {
glob_TreeClassInstance = new Tree();
glob_TreeClassInstance
.setMainHtmlNodeId ( "example-tree-holder" )
.render ( treeJsonData );
/*
Another example with several methods to configure the Tree.
glob_TreeClassInstance
.setDebug ( true ) // turns on extended infos in browser's developer tools
.setMainHtmlNodeId ( "example-tree-holder" )
.setNodesWithIcons ( true ) // turns on mini images when in json data icon prop is set, or shows in mode ease icons of data types.
.setNodesOpenedMode ( TreeConstants.NodesOpenedMode.ALL_SHOWN ) // .ALL_HIDE .JSON_DATA_DEFINED ( "opened": true )
.setRenderingMode ( TreeConstants.RenderingMode.Conf ) // .Ease
.addJSTreeEventListener ( // tree click example event handler
TreeConstants.TreeEventsNames.EVENT_NAME__TREE_NODE_LABEL__CLICK,
( eventName, eventPayload ) => {
console.log(eventName, eventPayload);
}
)
.render ( treeJsonData ); */
});
</script>
import {
IRenderingMode, ITreeCssClassNames, ITreeEventsNames, ITreeDefaults,
INodesOpenedMode
} from "./Types.js";
export class TreeConstants {
static RenderingMode: IRenderingMode = {
Ease: 1,
Conf: 2,
};
static NodesOpenedMode: INodesOpenedMode = {
ALL_SHOWN: 1,
JSON_DATA_DEFINED: 2,
ALL_HIDE: 3,
};
static TreeCssClassNames: ITreeCssClassNames = {
MAIN_CLASS_NAME: "tree",
CLASS_NAME_WITH_ICONS: "with-icons",
CLASS_OPENED: "toggle-with-subtree-opened",
CLASS_WITHOUT_SUBTREE: "toggle-without-subtree",
CLASS_ICON_SHOW: "icon-show",
CLASS_ICON_HIDE: "icon-hide",
CLASS_AND_ID__CONTEXT_MENU: "context-menu-container",
CLASS_DATATYPE_OBJECT: "holder-datatype--object",
CLASS_DATATYPE_ARRAY: "holder-datatype--array",
CLASS_DATATYPE_STRING: "holder-datatype--string",
CLASS_DATATYPE_NUMBER: "holder-datatype--number",
CLASS_DATATYPE_BOOLEAN: "holder-datatype--boolean",
PREFIX__CLASS_DATATYPE: "holder-datatype--",
};
static TreeEventsNames: ITreeEventsNames = {
EVENT_NAME__AFTER_RENDER_ONE_NODE: "afterRenderOneNode",
EVENT_NAME__TREE_NODE_EXPAND_BUTTON__CLICK: "openButtonClick",
EVENT_NAME__TREE_NODE_LABEL__CLICK: "treeNodeLabelClick",
};
static TEMPLATE__TREE_HTML_NODE: any = `
<li
data-id=""
data-holder-id=""
data-order=""
>
<pre class="jstree-html-node" data-json="">
<pre class="open-button ">
<pre class="opened"></pre>
<pre class="closed"></pre>
<pre class="without-subtree"></pre>
<pre class="animated"></pre>
</pre>
<pre class="jstree-html-node-holder-icon ">
<img src="" />
</pre>
<a href="" class="jstree-html-node-label"></a>
</pre>
<ul></ul>
</li>
`;
static Defaults: ITreeDefaults = {
debug: false,
renderingMode: TreeConstants.RenderingMode.Ease,
nodesWithIcons: true,
nodesOpenedMode: TreeConstants.NodesOpenedMode.ALL_HIDE,
isModifiable: false,
dataTypesCssClassesEnabled: true,
};
}
export interface ITreeDefaults {
debug: boolean;
renderingMode: number;
nodesWithIcons: boolean;
nodesOpenedMode: number;
isModifiable: boolean;
dataTypesCssClassesEnabled: boolean;
}
export interface ITreeRenderRetValue {
currentNodeSubtreeLength: number;
node: any;
}
export interface IRenderSubtreeResult {
currentNodeSubtreeLength: number;
subtreeJsonNodesLength: number;
// subtree: any;
}
export interface IRenderingMode {
Ease: number;
Conf: number;
}
export interface INodesOpenedMode {
ALL_SHOWN: number;
JSON_DATA_DEFINED: number;
ALL_HIDE: number;
}
export interface IRenderTemplateRendererData {
iconSrc: any;
iconShowClassName: any;
labelText: any;
hyperlink: any;
cssClasses: any;
dataId: any;
dataHolderId: any;
dataOrder: any;
dataJson: any;
openButtonStateClassName: any;
hasSubtree: boolean;
}
export interface ITreeCssClassNames {
MAIN_CLASS_NAME: any;
CLASS_NAME_WITH_ICONS: any;
CLASS_OPENED: any;
CLASS_WITHOUT_SUBTREE: any;
CLASS_ICON_SHOW: any;
CLASS_ICON_HIDE: any;
CLASS_AND_ID__CONTEXT_MENU: any;
CLASS_DATATYPE_OBJECT: any;
CLASS_DATATYPE_ARRAY: any;
CLASS_DATATYPE_STRING: any;
CLASS_DATATYPE_NUMBER: any;
CLASS_DATATYPE_BOOLEAN: any;
PREFIX__CLASS_DATATYPE: any;
}
export interface ITreeEventsNames {
EVENT_NAME__AFTER_RENDER_ONE_NODE: any;
EVENT_NAME__TREE_NODE_EXPAND_BUTTON__CLICK: any;
EVENT_NAME__TREE_NODE_LABEL__CLICK: any;
}
export interface ITreeAdapter {
getSubtreeNodeToRender (
loopPropertyValue: any,
loopPropertyKey: any
): any;
getDataForRendering (
node: any,
flatNodeClone: any,
dataTypeString: any,
nodeHasSubtree: boolean
): IRenderTemplateRendererData;
getTreeNodeCssClasses__dataTypesCssClassesEnabled (
dataType: any,
node: any
): any;
getTreeNodeCssClasses__dataTypesCssClassesDisabled (
dataType: any,
node: any
): any;
}
export class TreeConf {
NODE_ICON__SRC: any;
NODE_LABEL__TEXT: any;
SUBTREE: any;
NODE__ID: any;
NODE__HOLDER_ID: any;
NODE__PATH: any;
NODE__ORDER: any;
NODE__HYPERLINK: any;
NODE__OPENED: any;
NODE__CSS_CLASS_NAME: any;
NODE__ART: any;
constructor() {
this.NODE_ICON__SRC = "icon";
this.NODE_LABEL__TEXT = "label";
this.SUBTREE = "subtree";
this.NODE__ID = "id";
this.NODE__HOLDER_ID = "holderId";
this.NODE__PATH = "PATH";
this.NODE__ORDER = "order";
this.NODE__HYPERLINK = "href";
this.NODE__OPENED = "opened";
this.NODE__CSS_CLASS_NAME = "cssClassName";
this.NODE__ART = "art";
}
}
Yours jaisocx.com Software Architect and Dev,
Elias