A web tool that visualizes GitHub and GitLab repositories with clean ASCII trees. Perfect for documentation, sharing, and understanding project structures. It runs entirely in the browser and fetches live data using GitHub’s official REST API (Git/Trees API) to ensure accuracy.
- 👀 Instant Visualization: Convert any GitHub & GitLab repository structure into a clean ASCII tree
- 🎯 Interactive Tree View: Expand or collapse folders for better navigation and exploration
- 📊 Repository Analysis: Visualize file type distribution and language breakdown with interactive graphs
- 🤖 AI-Powered Feedback (Currently Disabled): Get intelligent suggestions and analysis for your repository structure
- 💾 Multiple Export Formats: Download trees as README.md, .txt, .json, or .html files
- 🔍 Real-time Search: Quickly filter and highlight specific files or directories
- 🎨 Dual View Modes: Switch between ASCII and Interactive views for enhanced user experience
- 🌙 Dark & Light Themes: Comfortable viewing in any lighting condition
- ✨ Syntax Highlighting: Enhanced readability with beautiful code highlighting
- 📋 One-Click Copy: Copy directory structure to clipboard
- 💾 Persistent State: Remembers your last repository URL between sessions
- 🔒 Private Repository Support: Access private repos with personal access tokens
- 🚀 Zero Installation: Works directly in your browser - no setup required
RepoTree is built with modern technologies for optimal performance and user experience:
| Technology | Purpose |
|---|---|
| Next.js | React framework for server-side rendering and routing |
| TypeScript | Type-safe development and better code quality |
| Tailwind CSS | Utility-first CSS framework for rapid UI development |
| Shadcn UI | Beautiful, accessible component library |
| Octokit | Official GitHub API client for repository data |
| Recharts | Composable charting library for data visualization |
| Framer Motion | Smooth animations and transitions |
| Radix UI | Low-level UI primitives for accessibility |
| Lucide React | Beautiful, customizable icon set |
Simply visit RepoTree and start generating trees instantly!
# Clone the repository
git clone https://github.com/coder-ralph/RepoTree.git
# Navigate to project directory
cd RepoTree
# Install dependencies
npm install
# Start development server
npm run dev
# Open your browser
open http://localhost:3000- 🌐 Visit RepoTree
- 📝 Paste your GitHub or GitLab repository URL
- 🔘 Click the Generate button
- 🎉 Explore your repository structure!
- 💾 Download in your preferred format
For private repositories, you'll need to enable private access:
- Click "Enable Private Repos" at the top of the input field
- Follow the setup instructions:
- GitHub: Create a personal access token with
reposcope - GitLab: Create a token with
read_repositoryscope
- GitHub: Create a personal access token with
- Enter your token - it's stored locally and never shared
- Generate trees from your private repositories securely!
RepoTree provides insightful visualizations:
- File Type Distribution: See what types of files make up your project
- Language Breakdown: Understand the programming languages used
- Repository Structure (Currently Disabled): Get AI-powered feedback on your project organization
- 📝 Documentation: Include clean directory trees in your README files
- 🎓 Education: Help students understand project structures
- 💼 Code Reviews: Quickly grasp repository organization
- 🔄 Migration Planning: Visualize before restructuring projects
- 📊 Project Analysis: Get insights into codebase composition
I created RepoTree to help developers easily visualize and share repository structures.
A year ago, I saw a Stack Overflow question about generating directory trees from GitHub repositories, which inspired me to build this tool.
Original Stack Overflow Question 📚
Contributions are welcome! Report issues here or submit a Pull Request here.
This project was inspired by Nathan Friend's Tree Online and ASCII Tree Generator. I used these tools to create documentation for my project before.
If RepoTree has helped you, please consider:
- ⭐ Starring this repository to show your support
- 💛 Sharing it with other developers
Made with ☕ by Ralph Rosael