Fork me on GitHub

🌳 TreeView.js

Pure TypeScript Tree Component

Features: Right-click nodes for context menu • Double-click to toggle • Dynamic node creation/deletion

Getting Started

Import from CDN

Script:

https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/dist/treeview.min.js

CSS:

https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/css/TreeView.min.css

Basic Usage

Create a div and TreeView.js can attach itself to it:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/css/TreeView.min.css">
    <script src="https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/dist/treeview.min.js"></script>
</head>
<body>
    <div id="my-tree"></div>
    <script>
        const tree = TreeViewJS.createTree('my-tree', 'white');
        const folder = tree.createNode('📁 Documents', false, 'images/folder.png');
        folder.createChildNode('📄 File 1.txt', false, 'images/file.png');
        
        tree.drawTree();
    </script>
</body>
</html>