📁 Folder Structure Visualizer

Folder Structure Visualizer is a developer tool that converts ASCII folder trees into an interactive visual explorer and allows exporting the structure as a downloadable scaffold ZIP.

Instead of manually creating dozens of folders and files when starting a project, you can paste a tree structure and generate the entire scaffold instantly.

---

✨ Features

• 📂 ASCII → Visual Tree Paste a standard ASCII folder tree and instantly visualize it.

• 🌳 Collapsible Folder Explorer Expand or collapse folders like a real file explorer.

  • 🔍 Smart Search & Highlight Instantly search files and folders by name.
  • Highlights matching text in real-time
  • Automatically expands relevant folders
  • Filters out non-matching branches for clarity

• 📊 File & Folder Counters Automatically counts total files and directories.

  • 🎨 Intelligent File Icons Automatically assigns icons based on file types and names.
  • Supports multiple languages (JS, TS, Python, Java, C/C++, etc.)
  • Recognizes config files (package.json, .env, vite.config)
  • Enhances readability like a real IDE file explorer

• 📋 Copy Path Click any file or folder and copy its full path.

• 📄 Copy Tree as Markdown Export the folder structure as Markdown.

• 📦 Download Project Scaffold Generate and download a ZIP containing the entire folder structure.

  • ⚛️ React + Vite Preset Instantly generate a ready-to-run React + Vite frontend scaffold.

• 🎨 Tailwind CSS Preset Add Tailwind CSS configuration and generate a styled starter homepage.

• 🟦 TypeScript (TSX) Preset Generate TSX-based React scaffolds with App.tsx, main.tsx, vite.config.ts, and TypeScript config files.

• 🧩 Node + Express Preset Generate a backend starter with Express and a clean folder structure.

• 🖥 Custom Starter Screens Generated React scaffolds include a branded startup homepage with setup instructions.

• ⚠️ Vite 8 Node Warning Generated frontend scaffolds show a built-in Node.js version warning for Vite 8 compatibility.

• 🚫 Smart Ignore Rules Automatically filters out generated folders like node_modules, dist, build, .next, and coverage.

• 🖱 Drag & Drop Input Drop ASCII trees directly into the editor.

• 🧠 Flexible Parsing Supports both standard ASCII trees (├──, └──, │) and indentation-based structures. Indentation is only valid under folders (lines ending with /).

• ✨ Smooth UI Interactions

  • Animated folder expand/collapse
  • Rotating chevrons for visual feedback
  • Subtle hover and click effects for better UX

---

🖼 Preview

🧩 Full Interface

---

🔍 Smart Search & Highlight

• Real-time search filtering
• Auto-expands matching folders
• Highlights matched text for quick scanning

---

🧠 Scaffold Presets & Placement

• Generate React, TSX, Tailwind, and Express setups
• Choose custom folder placement dynamically

---

📂 Example Usage

• Paste ASCII tree → instantly visualize structure
• Explore like a real file system

Input

my-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   └── Footer.jsx
│   ├── pages/
│   │   └── HomePage.jsx
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── README.md

Result

This becomes an interactive visual tree inside the UI.

---

📦 Scaffold Export

The Download ZIP feature creates a project scaffold where the ZIP file is automatically named after your root folder.

⚠️ Important All files are generated as empty files, allowing developers to start coding immediately without manually creating folders and files.

⚠️ Note The scaffold system may occasionally generate a few extra folders or files (e.g., src/utils/) that were not explicitly defined in the ASCII tree.

This happens because certain presets (React, Vite, Tailwind, etc.) include framework-required or helper directories to ensure the project runs out of the box.

These additions are non-breaking and safe to remove.
If they are not needed for your project, feel free to delete them ("yeet them") without affecting functionality.

⚠️ Fixed An issue where Tailwind CSS imports TS by default even if the TypeScript checkbox was not checked.

Included Scaffold Presets

The scaffold system can optionally generate starter files for:

• React + Vite
• React + Vite + Tailwind CSS
• React + Vite + TypeScript (TSX)
• React + Vite + TypeScript (TSX) + Tailwind CSS
• Node + Express API
• Root .gitignore

These presets are merged into the parsed folder tree and exported as part of the ZIP.

---

🛠 Tech Stack

• Framework: React (Vite)
• Languages: JavaScript, TypeScript
• Styling: CSS, Tailwind CSS
• Backend Preset: Node.js, Express
• Icons: Lucide React & React Icons
• ZIP Generation: JSZip

---

⚛️ Generated Frontend Presets

When scaffold options are selected, the exported ZIP can generate frontend starter projects with:

JSX Preset

• App.jsx
• main.jsx
• vite.config.js

TSX Preset

• App.tsx
• main.tsx
• vite.config.ts
• vite-env.d.ts
• tsconfig.json
• tsconfig.app.json
• tsconfig.node.json

Tailwind Support

When Tailwind is enabled, the scaffold also includes:

• tailwind.config.js

• postcss.config.js

  Styling Behavior

The scaffold intelligently adapts styling based on selected options:

• With Tailwind CSS enabled

  • Uses utility-first styling
  • Does NOT generate App.css
  • Includes Tailwind config and directives in index.css

• Without Tailwind

  • Generates a standard App.css
  • Uses traditional CSS styling

This ensures clean, minimal, and relevant project output without unused files.

Vite 8 Compatibility Note

Generated frontend starter pages include a visible warning that Vite 8 requires:

• Node.js 20.19+, or
• Node.js 22.12+

---

🚀 Installation

Clone the repository:

git clone https://github.com/<your-username>/folder-structure-visualizer.git

Navigate into the project:

cd folder-structure-visualizer

Install dependencies:

npm install

Start the development server:

npm run dev

Open in browser:

http://localhost:5173

---

🧠 How It Works

1. Input – User pastes an ASCII folder tree.
2. Parsing – The parser converts the text into a nested JSON data structure.
3. Visualization – The UI renders the structure as a collapsible file explorer.
4. Action – The structure can then be:
   • copied as Markdown
   • explored visually
   • exported as a ZIP scaffold (ignoring build artifacts)

---

⚡ Performance Considerations

The application is optimized for responsiveness and smooth interaction:

• Efficient tree rendering using recursive components
• Search operates with lightweight string matching (includes)
• Only relevant branches are displayed during filtering
• Minimal DOM updates ensure good performance even on mobile devices

For extremely large folder trees, performance remains stable due to controlled rendering and state management.

---

---

🏆 Highlights

• Built a recursive tree rendering system from scratch
• Designed a dynamic scaffold generator with conditional file creation
• Implemented intelligent file-type recognition and icon mapping
• Created a responsive and animated file explorer UI
• Developed a real-world developer utility tool with practical use cases

🎯 Use Cases

• Quick Scaffolding – Set up new projects in seconds.
• Repo Visualization – Understand complex repository structures instantly.
• Architecture Sharing – Share project designs with teammates.
• Documentation – Generate clean trees for README files.
• Preset-Based Project Bootstrapping – Generate React, TSX, Tailwind, and Express starter structures instantly.

---

🔮 Future Improvements

• README auto-generation for exported projects
• Preset variants (Minimal / Standard / Production-ish)
• Custom starter pages and branding options
• Export GitHub-ready repository metadata

---

📜 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Farhaan Khan Computer Science Engineering student passionate about building developer tools and learning through projects.

---

⭐ Support

If you found this project useful, consider starring the repository to support development!