Import a local folder, GitHub or GitLab repository, ZIP, or existing tree. Hide generated files, annotate files and folders, then copy or export a README-ready directory tree.
Free to use. No sign-up or install. Folder reading, tree editing, rendering, and export run locally in your browser.
Use terminal `tree` for a quick snapshot. Use dir-tree when you need to hide generated files, explain the structure, and publish it in a README or docs.
Live directory tree workspace
Import a folder, repository, ZIP, or existing tree, hide noisy nodes, add aligned annotations, then copy or download README-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
A raw `tree` command is useful for a quick snapshot, but README files and technical docs need a focused view. Hide node_modules, build output, and other noise, add aligned annotations, then export a structure that is ready to paste.
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
Start with a local folder, GitHub or GitLab repository, ZIP, or existing tree text. dir-tree turns each source into one editable project structure that you can filter, style, annotate, and export.
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
Create README project structures, explain refactors in pull requests, map repositories for onboarding, or teach folder hierarchy—without rebuilding and aligning the tree by hand.
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 a quick snapshot. Use dir-tree when you need to import project sources, hide generated files, edit the structure, add aligned annotations, and export documentation-ready output.
| 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
Local folder reading, local ZIP parsing, tree editing, rendering, copying, and export run in your browser. Optional AI annotations send only the selected directory nodes, existing annotations, settings, and your prompt.
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
Import a local folder, GitHub or GitLab repository, ZIP, or existing tree output. Hide generated folders, add annotations, choose Unicode or plain ASCII connectors, then copy the result or export Markdown. Your original files are not changed.
Select or drag a local folder into dir-tree. The browser reads file and folder names and hierarchy locally so you can filter, edit, annotate, and export the structure without uploading file contents.
dir-tree imports local folders, GitHub/GitLab repository URLs, local ZIP files, remote ZIP URLs, `tree` command output, JSON, XML, HTML, and Markdown lists. Each source becomes one editable directory tree.
No. Local folder reading, local ZIP parsing, tree editing, rendering, copying, and export run in your browser. Optional AI annotations send only selected directory nodes, existing annotations, settings, and your prompt; source code and file contents are not sent.
The terminal `tree` command is useful for quick snapshots. dir-tree adds an editable browser workspace where you can hide generated folders, apply depth and exclude rules, customize the tree style, align annotations, and export documentation-ready output.
Yes. Add a note to any file or folder, then place annotations close to each path or align them in columns. Aligned layouts support Adaptive, Global column, and Per-folder columns strategies, and the exported ASCII or Unicode tree preserves the selected layout.
Unicode trees use connectors such as `├──` and `└──` for clearer visual structure. Plain ASCII uses basic characters for older terminals and restricted text environments. Both styles support annotations, copying, and export.
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. You can limit visible depth, use `.gitignore`, apply exclude patterns, hide generated folders, collapse folders, and export a focused tree for documentation or review.
Ready to generate your first directory tree?
Open the live workspace. No sign-up, no install, browser-first.
Try dir-tree in your browser