Folder Tree Generator
Three input modes (visual builder, indented text, folder drop), five render styles (Unicode / ASCII / Markdown / indented / bullets), file-icon emojis, inline comments, file counts, and one-click copy or download.
Build the tree
Add folders and files, rename inline, drag nothing — just type.
Live preview
Pick a style above. The output updates as you type.
my-next-app/
├── app/
│ ├── (marketing)/
│ │ ├── page.tsx
│ │ └── layout.tsx
│ ├── api/
│ │ └── hello/
│ │ └── route.ts
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
├── components/
│ ├── ui/
│ │ ├── button.tsx
│ │ └── card.tsx
│ ├── Header.tsx
│ └── Footer.tsx
├── lib/
│ └── utils.ts
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── next.config.ts
├── package.json
├── tsconfig.json
└── README.mdRender options
Fine-tune how the tree is formatted.
Show file icons
Prepend an emoji that hints at the file's role (TS, JSON, Docker, etc.).
Show inline comments
Append `# comment` per node when present.
Trailing slash on folders
Append `/` so folders are easy to spot in plain text.
Show file counts
Append `(N files)` to each folder.
Hide empty folders
Skip folders with no children in the output.
Hide ignored dirs
Skip common noise: node_modules, .git, .next, dist, build, .cache…