tree.nathanfriend.com

What is Tree?

Tree is a free browser-based tool for turning a folder structure into an ASCII tree diagram — the kind of plain-text layout you often see in README files, code comments, or documentation. You type or paste your folder and file names, and it generates a text diagram with the familiar ├── and └── branch characters. It is built with TypeScript and React, and it runs entirely in the browser, so there is nothing to install.

It is aimed at developers and technical writers who need to show directory layouts in places where a screenshot would be awkward: a GitHub README, a code review comment, a terminal-oriented tutorial, or a plain-text email. Because the output is text, it stays readable in monospace fonts, survives copy-paste, and does not need image hosting.

A quick way to judge whether it fits your workflow:

• Use Tree when you want a clean folder diagram as text and do not want to draw the branch characters by hand.
• Skip it if you need a live view of a real filesystem, file sizes, permissions, or a graphical explorer — it is a formatting aid, not a file manager.
• Consider the trade-off: hand-editing the generated text is easy, but large directory trees can become long and hard to scan, so you may want to trim to the relevant subfolders.

One practical note: the page itself says JavaScript must be enabled for the app to run, so if you open it and see only that message, check your browser settings or try a different browser.

As a next step, paste in a small real structure — for example a src/ folder with a few components — and copy the generated diagram straight into your project's README. If you want a comparison point, ASCIIFlow is a related text-diagram tool, though it targets freeform drawing rather than folder trees.

How do I generate an ASCII folder structure diagram with Tree?

Paste or type a folder tree into Tree and it renders the ASCII diagram for you. The page is a single-purpose editor: you supply the structure, it handles the box-drawing characters, indentation and alignment that are tedious to type by hand. Because it runs entirely in the browser, nothing needs to be installed.

How to use it

1. Open the site and enter your folder structure in the input area, one folder or file per line.
2. Indent nested items (spaces or tabs) to show what sits inside what.
3. Read the generated ASCII tree from the output, which uses ├──, └── and │ connectors.
4. Copy the result into wherever you need it.

Where this is useful

• README files and documentation — a small tree at the top of a repo README shows layout faster than prose.
• Code reviews and issues — paste a proposed structure instead of describing it.
• Teaching and tutorials — a clean diagram makes directory hierarchy concrete for beginners.
• Notes and tickets — a quick visual for "here's what the new folder should look like."

Trade-offs to know

• You still provide the structure. The tool formats; it does not scan your disk. If you want a real directory read automatically, you need a local command-line utility instead.
• ASCII output is plain text. It fits code comments, terminals and plain-text docs, but it is not a polished graphic for slides or marketing pages. For those, a drawn diagram tool is a better fit.
• Very large trees get unwieldy in any text format, regardless of tool.

Practical next step

Start by pasting an existing structure you already have — for example, the output of a local tree command on your machine — and let the site reformat it. That is the fastest way to see whether the style suits your document. If you only need a short subtree, type just those few lines rather than the whole project.

Can Tree import an existing folder structure from a local directory or a text list?

Tree does not import from a local directory or a text list. Based on the available page information, it is a browser-based utility for generating ASCII folder structure diagrams, and the page only indicates that JavaScript must be enabled to run the app. There is no stated support for reading an existing folder tree from your disk or pasting a list of paths to reconstruct it.

In practice, that means you build the structure by entering folder and file names directly in the tool, rather than pointing it at a directory. If you need to visualize an existing local project, you would typically have to recreate the relevant branches manually — feasible for a handful of folders, tedious for a deep tree.

A practical next step: if your goal is to document a real directory, list the folders you care about first (for example with your system's file browser or a terminal command), then type only those branches into Tree. For one-off diagrams, that keeps the manual work bounded. If you regularly need to convert an actual directory into a tree diagram, a command-line approach or an editor extension that reads the filesystem will fit better than a browser tool that starts from a blank canvas.

How do I customize the characters, indentation, or icons in the ASCII tree output?

The customization options live in the editor interface, not in the page markup, so you need the app running in a browser with JavaScript enabled to see them. Tree is a browser-based generator for ASCII folder-structure diagrams, and its controls are exposed as settings alongside the tree input rather than as URL parameters or config files.

What you can typically adjust

• Characters / connector style: switch between plain ASCII characters and box-drawing characters, which changes whether branches look like |-- or ├──. This matters when the output will be pasted into a plain-text file, a code comment, or a Markdown code block that may not render Unicode cleanly.
• Indentation: set how many spaces each nesting level advances. Two spaces keeps deep trees compact; four spaces reads more clearly in wide documents.
• Icons: toggle per-type markers such as folder and file glyphs. Icons make a diagram scannable at a glance, but they add noise if the tree is meant to be machine-parsed or diffed in version control.

A practical decision path

If you are pasting into a GitHub issue or README, box-drawing characters plus folder icons usually look best. If you are dropping the tree into a shell script comment, a Python docstring, or an email that may be read in a plain-text client, choose ASCII connectors and no icons so nothing turns into mojibake.

As a concrete example: a developer documenting a small React project for a README might use box-drawing characters, two-space indentation and folder/file icons. The same developer writing a comment block inside a .py file would switch to ASCII-only connectors and turn icons off.

Next step

Open the app, paste a sample folder listing, then change one setting at a time and watch the preview update. Start with connector style and indentation, since those affect layout most; adjust icons last. Copy the result only after the preview matches your target medium.

Does Tree work offline or can I self-host it?

Tree is a browser-based tool, so offline use and self-hosting are separate questions: the hosted version at Tree needs a network connection to load, but its source is available for anyone who wants to run it themselves.

Offline use

• The hosted app is a client-side web app, so once the page and its assets are loaded in your browser, generating a diagram doesn't require sending your folder text anywhere. That means a flaky connection mid-session is unlikely to interrupt your work.
• A cold start with no connection at all will fail, since the app itself has to be fetched first. There's no documented offline mode, installable app or service worker described on the site.
• Practical workaround: load the page while online, keep the tab open, and paste your structure when you need it. This is fine for a single working session but not a reliable long-term offline setup.

Self-hosting

• Tree is written in TypeScript and React, which means it's a static front-end rather than a server-backed service. Self-hosting therefore means building the project and serving the resulting static files from your own machine or web server.
• That approach suits teams who want the tool on an internal network, want to pin a specific version, or want to avoid depending on a third-party domain.
• The trade-off is maintenance: you take on building, updating and hosting it yourself, and you'd need to check the project's repository for its actual build and licence terms before relying on it.

How to decide

Next step: if self-hosting matters to you, find the project's source repository, confirm the licence, and try a local build. If you only need it now and then, just open the hosted app and keep the tab around.

How does Tree compare to command-line tools like tree or find for creating directory diagrams?

Tree is a browser-based diagram generator: you type or paste a folder structure, and it renders an ASCII tree you can copy into documentation, tickets or chat. Command-line tree and find do the opposite — they inspect a real directory on your machine and print what is actually there.

The practical split is whether the structure already exists on disk.

• Use the command line when the truth is on disk. tree gives you a formatted hierarchy with counts and optional depth limits; find is better when you need filtering — specific extensions, sizes, modification dates — and can be piped into other tools. Both reflect the real filesystem, including files you forgot about.
• Use Tree when the structure is a proposal or a sketch. You can draft a target layout before creating any folders, paste a structure someone sent you, or hand-edit names to anonymise a client project. Nothing touches your filesystem, which also makes it safe on a locked-down or shared machine.

Trade-offs worth knowing

A concrete case: you are writing a README for a new project and want to show the intended layout. Running tree on an empty repo gives you nothing useful, so you sketch it in Tree, copy the result into the README, and later run tree -L 2 to confirm the real repo matches. If it drifts, the command-line output is the one to trust.

A decision rule: if the answer must be accurate, generate it from the filesystem; if it must be readable, editable or shareable, build it by hand. Many people use both in the same task — draft in Tree, verify with tree.

For deeper command-line options, the manual pages are the reliable reference; GNU Coreutils covers find, while tree itself is a separate utility documented by its own maintainers.