Folder Structure Visualizer

Input Structure

Use indentation (2 spaces) to define hierarchy. Start lines with a folder 📁 or file 📄 icon.

Visualization

No structure to display.

'; } } // --- EVENT LISTENERS --- document.getElementById('visualize-btn').addEventListener('click', visualize); outputEl.addEventListener('click', function(e) { if (e.target.classList.contains('fsv-tree-toggle')) { e.target.classList.toggle('collapsed'); e.target.textContent = e.target.classList.contains('collapsed') ? '+' : '−'; } }); document.getElementById('pdf-download-btn').addEventListener('click', async () => { const btn = document.getElementById('pdf-download-btn'); btn.textContent = 'Generating...'; btn.disabled = true; const { jsPDF } = window.jspdf; const canvas = await html2canvas(document.getElementById('printable-area'), { scale: 2, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight - 20); pdf.save('Folder_Structure.pdf'); btn.textContent = 'Download as PDF'; btn.disabled = false; }); // Initial visualization visualize(); });
Scroll to Top