Select a local folder in your browser, parse the real project tree, hide noisy folders, add aligned annotations, and export README-ready ASCII, Markdown, TXT, or JSON.
No sign-up. No install. Folder reading, tree editing, rendering, and export run in your browser.
Use terminal `tree` for a quick snapshot. Use dir-tree when that snapshot needs hiding, annotations, and polished documentation output.
Live directory tree workspace
Use the live workspace to import a project structure, hide noisy nodes, add annotations, preview ASCII, and copy or download documentation-ready output.
Loading the live workspace
The directory tree editor runs in your browser so you can try the workflow without creating an account.
Why dir-tree
The terminal `tree` command is great for quick snapshots. Documentation needs hidden build output, .gitignore-aware filtering, aligned annotations, style controls, and exports that stay readable in README files, docs, and pull requests.
Start from a real folder, repository, ZIP file, remote ZIP URL, or existing tree output instead of stitching project structure notes together manually.
Folder import · Repo URL · ZIP · Remote ZIP · Tree output
Before
README draft - copied terminal output - old folder list - manual cleanup notes
After
my-app/ ├── app/ // routes ├── components/ // reusable UI └── package.json // dependencies
Remove node_modules, build output, caches, and generated folders from the published view without changing files on disk.
Depth · .gitignore · Exclude rules · Hide nodes
Before
$ tree -L 3 . ├── node_modules/ ├── .next/ ├── dist/ ├── src/ └── package.json
After
my-app/ ├── src/ // app code └── package.json // dependencies
Add manual annotations or optional AI drafts, then align comments and tune the tree style so the output stays easy to scan.
Tree style · Manual annotations · Aligned columns
Before
├── auth.ts // auth? ├── api.ts // client └── format.ts // helper
After
├── auth.ts // sign-in flow ├── api.ts // API client └── format.ts // text formatting
Copy clean ASCII, download Markdown or TXT, or export JSON after choosing the tree style that fits your README, docs, or pull request.
Tree style · Markdown · TXT · JSON
Before
Paste raw output fix spacing wrap code block repeat next time
After
Ready to publish Copy to clipboard Download Markdown Download TXT Export JSON
Workflow
dir-tree normalizes local folders, ZIP archives, remote URLs, pasted ASCII trees, JSON, XML, HTML, and Markdown lists into one styled project structure.
Start from a local folder, dragged directory, GitHub/GitLab repository, ZIP file, remote ZIP URL, or existing tree output.
Apply depth limits, .gitignore rules, exclude patterns, sorting, and hidden nodes without changing files on disk.
Choose Unicode or plain ASCII connectors, adjust indentation and annotation alignment, then copy output or download Markdown, TXT, and JSON.
Use cases
Use dir-tree whenever a project structure needs to be explained, reviewed, taught, or pasted into developer documentation.
Open-source maintainers and template authors
Generate a clean folder structure for README.md without hand-aligning every line. Hide build artifacts, add short explanations, and choose a tree style that matches your repository docs.
starter-kit/ ├── app/ // routes and layouts ├── components/ // reusable UI ├── lib/ // shared utilities └── README.md // setup guide
Technical writers and developer advocates
Turn a project folder into an architecture map with aligned annotations and a consistent tree style for routes, models, middleware, components, and shared utilities.
api-service/ |-- routes/ // HTTP endpoints | |-- auth.ts // JWT & sessions | `-- users.ts // user CRUD |-- models/ // DB schemas `-- middleware/ // request pipeline
Engineers reviewing refactors
Give reviewers a quick map of the new structure, visible scope, and key folder notes before they open the diff.
src/ ├── auth/ // sign-in flow ├── hooks/ // shared hooks ├── utils/ // shared helpers └── README.md // structure notes
CS instructors and course creators
Create folder hierarchy examples for tutorials, onboarding, and classroom material with both visual structure and consistent ASCII output.
lesson-01/ |-- starter/ // student begins here | `-- index.js // entry point `-- solution/ // instructor reference
Comparison
Use terminal `tree` for quick snapshots. Use dir-tree when you need to import real project sources, edit the structure, hide noise, customize the tree style, add aligned annotations, and publish the result.
| Capability | Terminal `tree` | tree.nathanfriend.com | dir-tree |
|---|---|---|---|
| Reads real local directories | Yes | No | Yes |
| Browser-based, no install | No | Yes | Yes |
| Local and remote ZIP support | No | No | Yes |
| GitHub/GitLab repository URLs import | No | No | Yes |
| Import existing ASCII / JSON / XML trees | Output only | Limited | Yes |
| Visual editing and hide nodes | No | Edit only | Yes |
| Tree style customization | Manual flags and cleanup | Basic visual options | Connector style, indentation, root path display, metadata, and annotation templates |
| Annotation column alignment | No | No | Yes |
| Manual and optional AI annotations | No | No | Yes |
| Documentation-ready Markdown / TXT / JSON export | Raw output | Generated ASCII | Styled and annotated |
Privacy boundary
Folder reading, local ZIP parsing, visual editing, ASCII rendering, and export run client-side. Optional AI annotation sends directory nodes you selected, existing annotations, generation settings, and any prompt you provide.
Open folders, parse local ZIP files, edit trees, render ASCII, and export results in the browser.
dir-tree uses names, hierarchy, and optional display metadata for directory tree generation.
Directory nodes you selected, existing annotations, generation settings, and any prompt you provide are sent only when you request optional AI annotations.
Optional AI data flow
File contents, source code, file sizes, and modification times are not part of the AI annotation payload.
User reviews
Developers, writers, and educators use dir-tree to turn folders, repositories, ZIPs, and existing tree output into styled, annotated project documentation.
"The README project tree used to be the part I avoided. Now I can update it after every release, keep the style consistent, and stop aligning annotations by hand."
"I can import a project folder or repository, hide generated output, tune the tree style, and share a clean architecture map before the docs review starts."
"For refactors, the annotated tree gives reviewers a quick map of the new structure before they open the diff."
"The classroom examples finally match the folder hierarchy students see on disk, including the solution folders I need to hide during exercises."
"Optional AI annotations give us a useful first draft, and the local-first boundary makes the workflow easier to use for internal docs."
"We use it to turn ZIP handoffs into readable folder maps before deciding what belongs in onboarding docs."
FAQ
Yes. The directory tree generator, editor, annotation workflow, and ASCII export tools are free to use in the browser without creating an account.
Yes. Select or drag a local folder into dir-tree, and the browser reads the folder names and hierarchy so you can edit, annotate, and export the project structure.
No. dir-tree does not upload file contents or read source code. Folder reading, ZIP parsing, tree editing, ASCII rendering, copying, and export run in your browser.
dir-tree can import local folders, GitHub/GitLab repository URLs, local ZIP files, remote ZIP URLs, and `tree` command output from any platform, including ASCII tree text plus JSON or XML tree output when available. It also imports JSON tree data, XML, HTML, and Markdown list structures as styled directory trees.
The terminal `tree` command is useful for quick snapshots. dir-tree is better when you need a browser workspace to hide generated folders, apply depth or exclude rules, edit visible nodes, customize tree style, align annotations, and export documentation-ready output.
Yes. In the Tree style panel, you can choose Unicode or plain ASCII connectors, adjust indentation, show the root path, append directory slashes, display line numbers or file metadata, and control how annotations align before copying or exporting the tree.
Yes. Annotations are short notes attached to directory tree nodes. In exported ASCII trees, they appear as aligned line comments such as `// routes and layouts`, so README files and docs stay easy to scan.
Yes. AI annotation is optional, with 5 free requests per day on a UTC daily reset. When you request it, dir-tree sends directory nodes you selected, existing annotations, generation settings, and any prompt you provide. It does not send source code, document bodies, or file contents.
Yes. After cleaning and annotating the visible tree, you can copy ASCII output or download Markdown, TXT, and JSON exports for README files, docs pages, and pull request descriptions.
Yes. You can limit visible depth, use `.gitignore`, apply exclude patterns, hide generated folders, collapse folders, and export a focused tree for documentation or review.
dir-tree works best in modern desktop browsers. Chromium-based browsers have the strongest folder picker support, while Firefox and Safari can use drag-and-drop or file picker fallbacks.
Ready to generate your first directory tree?
Open the live workspace. No sign-up, no install, browser-first.
Try dir-tree in your browser