Folder Tree Visualizer
Paste an indented list of file and folder names and get a pretty ASCII tree — the kind you'd paste into a README.
project/ ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ └── utils.ts │ └── index.ts ├── public/ │ ├── favicon.ico │ └── robots.txt ├── package.json └── README.md
The output uses Unicode box-drawing characters — they render in every modern terminal and on GitHub.
How to use
- Paste or type your indented list — one file or folder per line, children indented one level deeper than their parent.
- Set the indent option (2 spaces, 4 spaces, or tabs) to match how your list is indented; a wrong setting flattens or over-nests the tree.
- Toggle the trailing slash if you want directories marked with
/. - Copy the result and paste it into a fenced code block in your README or docs.
About this tool
ShowHide
Turn a plain indented list of file and folder names into the classic box-drawing tree (├──, └──, │) you see in README files and in the output of the Unix tree command. The parser reads each line's leading whitespace to determine depth — choose 2 spaces, 4 spaces, or one tab per level to match your source — and builds the hierarchy from that alone, so you can sketch a structure in any editor and paste it here. Any entry that has children is treated as a directory and can get a trailing /; entries without children are shown as files, and multiple top-level roots are fine.
Everything happens in your browser as you type; nothing is uploaded, and your draft is kept in local storage so it survives a page reload. The output uses Unicode box-drawing characters, which render correctly in every modern terminal, in GitHub/GitLab fenced code blocks, and in most documentation systems — wrap the tree in a code block so a monospace font keeps the branches aligned.
Frequently asked questions
What if my list mixes tabs and spaces?
The parser honours only the indent unit you select, so mixed indentation produces wrong depths. Pick whichever style dominates, or normalize first — a regex find-and-replace of \t with two spaces in your editor takes seconds.
Why does the trailing slash on directories matter?
In plain text there are no icons, so the / suffix is the only cue that an entry is a folder rather than an extensionless file. GitHub READMEs, terminal documentation, and the Unix tree -F flag all use the same convention.
How do I show an empty folder?
A line is treated as a directory only when it has at least one child, so an empty folder renders like a file. Add a placeholder child such as .gitkeep if you need it to appear as a folder — that's also the common Git convention for keeping empty directories.
Will the tree look right on GitHub?
Yes — the ├──/└── glyphs are plain Unicode text. Put the tree inside a fenced code block (triple backticks) so GitHub renders it in a monospace font; outside a code block the whitespace collapses and the branches misalign.
Is my input saved or uploaded?
It never leaves your browser. The tool does keep your latest input in the browser's local storage so it's still there after a reload; clear the textarea (or your site data) to remove it.
Related tools
MP4 / ISO Base Media File Inspector
Open an MP4, M4A, M4V or MOV in your browser: brands, the fast-start check, the whole box tree, every track codec and duration, and iTunes tags.
File
Image → ASCII Art
Convert any image to ASCII art with adjustable width, character set, and inversion — all in your browser.
Image
Text to Binary Converter
Convert text to 8-bit binary and back. UTF-8 encoded, so emoji and accented characters work, with a choice of byte separator.
Convert
Text to Hex Converter (and back)
Convert text to hexadecimal bytes and decode hex back to text, with UTF-8 support, in your browser.
Convert
Lorem Ipsum Generator
Generate placeholder text by paragraphs, sentences, or words.
Text
Fancy Unicode Text
Type plain ASCII and get 𝐁𝐨𝐥𝐝, 𝐼𝑡𝑎𝑙𝑖𝑐, 𝓢𝓬𝓻𝓲𝓹𝓽, 𝔉𝔯𝔞𝔨𝔱𝔲𝔯, 𝙼𝚘𝚗𝚘 and sans-serif variants from the Unicode Math Alphanumeric blocks.
Text