On file click, remove the 'active' class from all nodes, then add it to the clicked node: document.querySelectorAll('.active').forEach(n => n.classList.remove('active')); node.classList.add('active'). Style .active with a different background.
File type icons (by extension), search files (recursive filter), context menu (right-click with rename/delete/new), active file highlight, and drag and drop for moving files between folders. These make it feel like a real IDE.
Map file extensions to icons: const fileIcons = { '.js': '...', '.html': '...' }. Get the extension from the filename: name.substring(name.lastIndexOf('.')). Look up the icon, default to a generic file icon.
Recursively search the tree: function searchFiles(node, query, results) { if (node.name.includes(query)) results.push(node); if (node.children) node.children.forEach(child => searchFiles(child, query, results)); return results; }
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
