Don't like ads? Go Ad-Free Today

Directory / Folder Tree Generator (ASCII)

DeveloperText
ADVERTISEMENT · REMOVE?

Options

ADVERTISEMENT · REMOVE?

Guide

Directory / Folder Tree Generator (ASCII)

Directory / Folder Tree Generator

Turn a plain indented file list or a set of slash-separated paths into a clean ASCII directory tree with proper box-drawing characters. Perfect for READMEs, technical documentation, blog posts, and code reviews where a visual project structure communicates more than a flat list of file paths.

How to Use

  1. Paste an indented file list (spaces or tabs) or a list of slash-separated paths (one per line) into the input box.
  2. Pick an input format — leave it on Auto-detect for most cases.
  3. Choose a tree style: Unicode box-drawing, plain ASCII, or pure-space indent.
  4. Toggle file/folder icons, trailing slash on folders, or compact mode as needed.
  5. Click the Copy button to grab the generated tree, or Download it as a tree.txt file.

Features

  • Two input formats – Indented list or slash-separated paths, with automatic detection.
  • Three render styles – Unicode box-drawing (├── └── │), pure ASCII (|– `– |), or plain indentation.
  • Icon toggle – Prepend 📁 and 📄 markers to distinguish folders from files at a glance.
  • Trailing slash option – Mark folders with a trailing slash for unambiguous output.
  • Compact mode – Tighter horizontal spacing for deeply nested trees.
  • Auto-folder detection – Any path that contains children is rendered as a folder; leaves become files unless you append a trailing slash.
  • Instant client-side rendering – No upload, no server round-trip, no data ever leaves your browser.

Common Use Cases

  • README documentation – Show project layout so contributors can navigate the codebase quickly.
  • Tutorials and blog posts – Illustrate file structure before introducing code examples.
  • Code review & design docs – Communicate proposed folder structure for new features.
  • Onboarding materials – Help new engineers understand monorepo or microservice layouts.
  • Issue reports & bug reproductions – Paste a minimal repo layout when filing GitHub issues.

FAQ

  1. What are box-drawing characters?

    Box-drawing characters are Unicode glyphs (range U+2500–U+257F) designed to draw boxes, lines, and tree connectors with monospace text. The directory tree style uses ├ (U+251C), └ (U+2514), ─ (U+2500), and │ (U+2502) to render branching structures without bitmap graphics. They render reliably in any UTF-8 environment, including code editors, Markdown previews, and terminals.

  2. When should I use ASCII style instead of Unicode box-drawing?

    Use plain ASCII (|-- and `--) when the target environment may not render Unicode correctly: legacy terminals, certain log aggregators, plain-text emails, or systems with strict ASCII-only constraints. Box-drawing characters look cleaner in modern editors, GitHub READMEs, and most documentation platforms.

  3. How does the tool tell folders from files?

    In slash-separated input, any path component that has children below it is treated as a folder, while leaf names are treated as files. You can override the heuristic by appending a trailing slash (for example my-project/empty-folder/) to force a node to render as a folder even when it has no children. In indented input the same leaf-vs-parent rule applies.

  4. Why use a monospace font for tree output?

    Tree connectors only line up vertically when each character occupies the same horizontal width. Proportional fonts compress narrow glyphs like the vertical bar, breaking the alignment between parent and child rows. Always paste the output into a monospace context such as a code block, terminal, or pre-formatted Markdown.

Want To enjoy an ad-free experience? Go Ad-Free Today

Install Our Extensions

Add IO tools to your favorite browser for instant access and faster searching

Add to Chrome Extension Add to Edge Extension Add to Firefox Extension Add to Opera Extension

Scoreboard Has Arrived!

Scoreboard is a fun way to keep track of your games, all data is stored in your browser. More features are coming soon!

ADVERTISEMENT · REMOVE?
ADVERTISEMENT · REMOVE?
ADVERTISEMENT · REMOVE?

News Corner w/ Tech Highlights

Get Involved

Help us continue providing valuable free tools

Buy me a coffee
ADVERTISEMENT · REMOVE?