Folder tree generator
Turn an indented list into a folder tree with ├── └── │ connectors: space or tab indentation, 2 or 4 spaces, optional icons and file counts — and convert tree text back to an indented list.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
What this tool does
- Paste a project layout into a README, issue or design doc: turn a rough indented list into a tree with ├── └── │ connectors that matches `tree` output.
- Work in reverse: take a tree a colleague pasted and flatten it back into an indented list you can edit or feed to a script.
- Get the numbers before touching .gitignore or CI config — the tool counts folders, files and the maximum depth.
- Add 📁 / 📄 icons so a plain-text tree still distinguishes folders from files in chat apps and Markdown.
Example
Input
src
tools
base64.ts
hash.ts
index.ts
README.mdOutput
├── src │ ├── tools │ │ ├── base64.ts │ │ └── hash.ts │ └── index.ts └── README.md
The defaults are a 2-space indent width with connectors on; the stats read 2 folders, 4 files, 6 total and 3 levels. Converting back restores exactly the original indented list.
Frequently asked questions
Can I indent with any number of spaces?
No — each level must be a multiple of one unit. The tool takes the smallest non-zero indent as that unit, so mixing 2-space and 3-space indents raises "inconsistent indentation". Tabs are expanded first using the chosen width (2 or 4 spaces).
What if a line skips a level (0 → 2)?
That also fails with "inconsistent indentation". A line may only indent one level deeper than the previous one, because a parent has to appear immediately before its children — otherwise there is no way to know what the skipped level contained.
How does it tell folders from files?
By structure, not by name: a node with children counts as a folder and a leaf counts as a file. So if "src" is the last line with nothing under it, it is counted as a file and shown with the 📄 icon.
Why did the icons and connectors disappear when converting back?
The reverse conversion strips ├── └── │, extra spaces and the 📁 / 📄 icons, leaving only a 2- or 4-space indent per level. That keeps the result directly readable by scripts and other tools.
Is my input uploaded?
No. Conversion runs entirely in your browser, the page sends no requests, and sensitive layout details never leave your device.
Keywords：目录树文件夹树folder treetree 命令缩进列表项目结构directory treeascii tree