Developer Tools
Folder Tree Generator
Turn an indented outline or a list of paths into a clean ASCII or Unicode folder tree for READMEs, docs, and PRs. Copy ready to paste.
Generated tree
./ ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── tools/ │ │ └── [slug]/ │ │ └── page.tsx │ ├── components/ │ │ ├── copy-button.tsx │ │ └── tool-shell.tsx │ ├── lib/ │ │ └── tools/ │ │ ├── registry.ts │ │ └── categories.ts │ └── tools/ │ └── developer/ │ └── folder-tree-generator.tsx # the new tool ├── public/ │ └── favicon.ico ├── package.json ├── README.md # project overview └── tsconfig.json
Options
Drop the tree into a Markdown README
Wrap the output in a fenced code block to keep the connectors aligned on GitHub, GitLab, and most static-site generators:
```text ./ ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── tools/ │ │ └── [slug]/ │ │ └── page.tsx │ ├── components/ │ │ ├── copy-button.tsx │ │ └── tool-shell.tsx │ ├── lib/ │ │ └── tools/ │ │ ├── registry.ts │ │ └── categories.ts │ └── tools/ │ └── developer/ │ └── folder-tree-generator.tsx # the new tool ├── public/ │ └── favicon.ico ├── package.json ├── README.md # project overview └── tsconfig.json ```
Input tips
- src/ with a trailing slash forces a folder even when empty.
- Two spaces then # turn the rest of the line into an inline comment.
- Mixed indentation is fine: the tool picks the smallest step it can see (tabs, two spaces, or four spaces) and rounds the rest to the nearest level.
- Use folders first sort when you want the layout to match how most file explorers display folders.
How to use
- Pick Indented outline if you want to type a layout from scratch, or Path list if you want to paste a list of relative paths and let the tool merge them.
- Paste or type your structure on the left. In outline mode, indent with 2 spaces, 4 spaces, or tabs; in path mode, use slashes (either / or \). End a folder name with / to keep it as a folder when it has no children, and put two spaces then # before a trailing comment.
- Pick the connector style (Unicode box-drawing for GitHub-flavored markdown, ASCII for plain text), a sort mode, and an optional root label.
- Read the generated tree on the right. Use Copy tree for the raw output or Copy as Markdown code block to grab a triple-backticked version ready for a README.
- Press Load sample to see a worked example or Clear to start with an empty editor.
About this tool
Folder Tree Generator turns a sketch of a project layout into a ready-to-paste ASCII or Unicode tree, exactly like the GNU tree command but right in your browser. Pick the input that matches how you already think. Indented outline mode reads one name per line and uses the indent (2 spaces, 4 spaces, or tabs) to decide which level each entry belongs to; the tool auto-detects the smallest step and rounds wider indents down so a slightly inconsistent paste still parses cleanly. Path list mode reads one path per line with forward or back slashes and merges every common prefix into a single tree, perfect for converting a glob output, a git diff name-only listing, or a file picker selection into a tidy diagram. A trailing slash forces an entry to stay a folder even when empty, and two spaces followed by # turn the rest of a line into a comment that prints next to the entry in the output, useful for tagging files like server.ts # entry point. Rendering uses real Unicode box-drawing characters by default (the ones GitHub and GitLab render correctly inside a fenced code block), or a pure ASCII fallback (|--, \--, | ) for plain-text emails, terminals with limited fonts, or contexts where the box glyphs render as boxes. Three sort modes cover real workflows: keep input order, alphabetical, or folders first then files (the layout most file explorers show). Optional touches include a custom root label, an automatic trailing slash on folders, live counts of total folders and files, and a one-click Copy as Markdown code block button that wraps the tree in a triple-backtick text fence so it renders correctly on every markdown host. Everything happens locally in your browser; the paths and names you type are never uploaded.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Markdown TOC Generator
Build a GitHub-style Markdown table of contents from any document.
Open tool
GeneratorMarkdown Table Generator
Editable grid, column alignment, paste from spreadsheet, live preview.
Open tool
TextMarkdown Editor
Live markdown editor with toolbar, preview, table of contents, and .md or .html download.
Open tool
DeveloperGitignore Generator
Build a .gitignore from curated language, framework, editor, and OS templates.
Open tool
GeneratorHTML Boilerplate Generator
Build a clean HTML5 starter template with meta, OG, JSON-LD, and a CSS reset.
Open tool
DeveloperConventional Commits Builder
Generate semantic git commit messages with type, scope, body, breaking change, and footers.
Open tool