Folder Tree Visualizer
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.
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.
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
Image → ASCII Art
Convert any image to ASCII art with adjustable width, character set, and inversion — all in your browser.
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.
Text to Hex Converter (and back)
Convert text to hexadecimal bytes and decode hex back to text, with UTF-8 support, in your browser.
Lorem Ipsum Generator
Generate placeholder text by paragraphs, sentences, or words.
URL Slug Generator
Turn any text into a clean URL slug — strip accents, choose a separator, set a max length.
Leetspeak (1337) Converter
Translate text into leetspeak and decode 1337 back to letters, in your browser.
ASN.1 / DER Decoder
Paste any DER structure — PEM, base64 or hex — and see its ASN.1 tree: offsets, tags, lengths and decoded values.