What is Tree (tree.nathanfriend.com)?

Tree is a browser-based utility that turns a folder structure into an ASCII tree diagram. You give it a directory layout, and it produces a text-based diagram you can paste into documentation, README files, code comments, or chat messages. It is written in TypeScript and React and runs entirely in the browser, so JavaScript must be enabled for the app to load and function.

What it does

The core job is simple: convert a list of folders and files into a formatted tree using plain text characters. Instead of drawing a diagram by hand or writing a script, you enter the structure and the tool handles the indentation and connector lines.

A typical output looks like this:

project/
├── src/
│   ├── components/
│   │   └── Button.tsx
│   └── index.ts
├── public/
│   └── favicon.ico
└── package.json

This format is widely understood and renders consistently in monospaced contexts, which is why it shows up so often in developer documentation.

Who it is for

• Developers writing README files or project documentation who need a quick structure diagram.
• Anyone explaining a directory layout in a bug report, pull request, or tutorial.
• People who want a text diagram rather than an image, so it stays readable in plain-text tools and version control.

Key characteristics

Things to keep in mind

Because the app is client-side and requires JavaScript, it will not work if scripts are blocked or if you open it in a text-only browser. The page itself only shows a notice that JavaScript is needed until the app loads, so there is no server-rendered fallback.

If you only need a one-off diagram, the tool is a fast alternative to manual formatting. If you need the diagram generated automatically as part of a build or script, you would be better served by a command-line tool that outputs the same style of tree.