Drop a folder, import an existing tree, or open a ZIP file. dir-tree turns project structure into an interactive tree you can edit, annotate, and export to clean ASCII, JSON, or Markdown.
No sign-up. No install. File contents stay on your device.
Stop hand-aligning README trees. Keep the speed of tree, then add visual editing, comments, styles, and AI annotations.
Live tool
Use the same tool that powers dir-tree.com. Open a local folder, drag in a ZIP, import an existing ASCII tree, adjust the output style, and copy the final result.
Loading the interactive reader
The reader loads on the client side so the SEO homepage can stay fast and content-rich.
Positioning
The terminal `tree` command is perfect for a quick snapshot. README files, onboarding docs, and pull requests need focus, comments, consistent styling, and a structure that can be edited after it is generated.
Terminal output is useful, but teams still need to remove noise, align comments, hide build artifacts, and make the result readable before it lands in docs.
Before
$ tree -L 3 . ├── node_modules/ ├── .next/ ├── src/ └── dist/
After
my-app/ ├── src/ // app code ├── package.json // deps └── README.md // guide
Adding comments by hand is slow, easy to misalign, and painful to keep in sync after files move or get renamed.
Before
├── auth.ts // handles auth ├── api.ts // api client └── format.ts // formatting
After
├── auth.ts // handles auth ├── api.ts // API client └── format.ts // formatting
Import ASCII, JSON, XML, HTML, or Markdown trees from any source and keep working instead of starting over.
Before
Paste tree output then manually re-format everything
After
Import → Edit → Export ASCII · JSON · XML HTML · Markdown
Features
dir-tree covers the full workflow: reading real directories, editing visually, adding AI annotations, and exporting documentation-ready output.
Open a local folder, drag a directory into the browser, choose a ZIP file, or fetch a remote ZIP URL. dir-tree builds from the actual structure, no manual typing required.
Folder · ZIP · Remote ZIP
Paste or upload ASCII trees, `tree -J` JSON, `tree -X` XML, HTML output, or Markdown lists. dir-tree reconstructs them as editable trees.
ASCII · JSON · XML · HTML · Markdown
Rename nodes, create folders, delete items, reorder with drag-and-drop, collapse sections, hide noisy files, adjust depth, and apply `.gitignore` patterns.
Rename · Reorder · Hide
Write annotations manually or let AI generate first drafts from file and folder paths. Choose `//`, `#`, `;`, `--`, or a custom template. Column alignment is automatic.
Manual · AI · Templates
Switch between Unicode and plain ASCII connectors, show line numbers, append directory slashes, align annotations, then copy or download TXT.
Unicode · ASCII · TXT
Core reading, editing, rendering, and export happen in the browser. AI annotation is optional and clearly separated.
Structure only · Opt-in AI
Comparison
Use `tree` for quick terminal snapshots. Use tree.nathanfriend.com for hand-written ASCII diagrams. Use dir-tree when the tree needs to be read from real files, edited, annotated, imported, and published.
Best for: Fast local snapshots
No visual editing, no annotations, and output often needs manual cleanup before publishing.
Best for: Hand-written ASCII diagrams
You type the structure manually. It does not read real folders or reconstruct imported trees as an editor.
Best for: Documentation-ready directory trees
Read real folders, edit visually, add manual or AI annotations, import existing outputs, and export clean text.
| Capability | Terminal `tree` | tree.nathanfriend.com | dir-tree |
|---|---|---|---|
| Reads real local directories | Yes | No | Yes |
| Browser-based, no install | No | Yes | Yes |
| Drag-and-drop folders | No | No | Yes |
| Local ZIP support | No | No | Yes |
| Remote ZIP URL support | No | No | Yes |
| Import ASCII trees | Output only | Manual input | Yes |
| Import `tree -J` JSON | Output only | No | Yes |
| Import `tree -X` XML | Output only | No | Yes |
| Import HTML / Markdown lists | Limited | No | Yes |
| Visual editing and hide nodes | No | No | Yes |
| Hide nodes without deleting source | Command filter | No | Yes |
| Annotation column alignment | No | No | Yes |
| Manual and AI annotations | No | No | Yes |
| Documentation-ready TXT export | Raw output | Generated ASCII | Styled and annotated |
Workflow
From raw folder to shareable, annotated ASCII art in under a minute.
01Open a local folder, drag a directory, select a ZIP, fetch a remote ZIP URL, or import an existing tree file.
02Apply `.gitignore`, adjust depth, exclude patterns, sort folders, hide noisy nodes, and edit without touching source files.
03Add comments manually, generate AI annotations, choose a connector style, align the comment column, then copy or download.
Use cases
Open-source maintainers & template authors
Generate a clean folder structure for README.md without hand-aligning every line. Hide build artifacts, keep source folders visible, and add short explanations for contributors.
starter-kit/ ├── app/ // routes and layouts ├── components/ // reusable UI ├── lib/ // shared utilities └── README.md // setup guide
Technical writers & developer advocates
Turn a project folder into an annotated architecture map. Explain what each directory does and keep comment style consistent across all docs pages.
api-service/ ├── routes/ // HTTP endpoints │ ├── auth.ts // JWT & sessions │ └── users.ts // user CRUD ├── models/ // DB schemas └── middleware/ // request pipeline
Engineers doing refactors
Show reviewers what moved, what was hidden, and why the new layout is easier to navigate. A small annotated tree can reduce review back-and-forth.
src/ ├── auth/ // moved from /pages ├── hooks/ // new shared hooks ├── utils/ // reorganized └── legacy/ // hidden from output
CS instructors, bootcamp teachers & course creators
Create examples that show how a project is organized. Students see both a visual tree and the exact ASCII output used in course materials.
lesson-01/ ├── starter/ // student begins here │ └── index.js // entry point └── solution/ // hidden in exercise
Privacy
Core directory reading, editing, rendering, and export run in your browser. AI annotation is optional and only sends compact path structure, existing annotations, and language preference.
Open folders, parse local ZIP files, edit trees, render ASCII, and export results in the browser.
dir-tree needs names, hierarchy, and optional display metadata. It does not inspect source code or document bodies for core tree generation.
When you request AI comments, only the compact visible path tree and existing annotations are sent. File contents are not sent.
Optional AI data flow
File contents, source code, file sizes, and modification times are not part of the AI annotation payload.
Proof
Four workflows where dir-tree fits better than a terminal command.
01
README maintainers
need clean output
Generate an annotated structure in seconds, not 20 minutes of hand-aligning.
02
Technical writers
need annotations
Turn a project folder into a fully annotated architecture map for technical docs.
03
Code reviewers
need structure context
Paste a focused, annotated tree into a pull request comment to explain a refactor.
04
Teachers
need clear examples
Create directory examples that work in slides, tutorials, and onboarding material.
Formats
Whether your tree comes from a terminal command, a Markdown note, a browser export, or a ZIP archive, dir-tree can turn it into an editable structure.
| Format / Source | Import | Export | Notes |
|---|---|---|---|
| Local folder | Yes | No | Directory picker or drag-and-drop |
| Local ZIP | Yes | No | Parsed entirely in browser |
| Remote ZIP URL | Yes | No | Browser fetches the URL |
| ASCII tree | Yes | Yes | Plain text directory trees |
| JSON tree | Yes | Yes | dir-tree JSON and tree -J output |
| XML / HTML / Markdown | Yes | Planned | tree -X, tree -H, docs and notes |
FAQ
Yes. The core directory tree reader, editor, annotation editor, and ASCII export workflow are intended to stay free for individual use.
Use `tree` when you need a quick terminal snapshot. Use dir-tree when you need to edit the structure, hide noisy nodes, add aligned comments, import existing output, or publish the result.
tree.nathanfriend.com is useful for typing a simple indented structure and generating ASCII. dir-tree reads real folders and ZIP files, imports existing tree output, edits visually, and adds annotations.
For core features, no. Folder reading, ZIP parsing, tree editing, ASCII rendering, and export all run in your browser. dir-tree builds structure from file and folder names; it does not upload file contents for core tree generation. Local ZIP parsing reads archive bytes in the browser to discover entries, but file contents are not uploaded.
AI annotation is optional. It sends a compact visible path tree, node type markers, existing annotations, node count, and language preference so AI can respond in the right language. It does not send file contents, source code, file sizes, or modification times.
Yes. dir-tree is designed to parse common external tree formats, including ASCII text, JSON, XML, HTML, and Markdown list structures.
Use caution if file or folder names contain client names, internal project codenames, unreleased product names, or other sensitive information. You can use manual annotations instead, rename sensitive paths before generating AI comments, or limit the visible tree depth before sending.
dir-tree works best in modern desktop browsers with folder picker or folder drag-and-drop support. Chromium-based browsers provide the strongest File System Access API support. Firefox and Safari can use drag-and-drop or legacy file picker fallbacks, though large directory loads may vary.
No, for core features. dir-tree builds structure from names, hierarchy, and optional metadata for display. It does not inspect source code, document bodies, binary file contents, secrets, or credentials.
The core workflow, including reading, editing, rendering, and exporting, runs in the browser and can work offline after the page has loaded. AI annotation and remote ZIP fetching require network access.
Not yet. A CLI and API are strong candidates for future monetization. The CLI could support local batch workflows such as auto-updating README trees in CI, while the API could provide programmatic tree rendering and AI annotation for documentation platforms.
Ready to visualize your first directory tree?
Use the live reader above. No sign-up, no install, browser-first.
Try dir-tree in your browser