How do I make the directory tree for a README?

Write your structure as an indented list, one file or folder per line, and put deeper items under their parent with more indentation. Mark a folder by ending its line with a slash. For an input like: src/ then two indented spaces and index.ts then utils/ then four indented spaces and helper.ts, the tool prints src/ with a branch into index.ts and a last branch into utils/ that holds helper.ts. Copy the result and paste it inside a fenced code block in your README so it renders in a monospace font.

How does indentation decide the levels?

Each step of indentation is one level deeper in the tree. With the two-space setting, no indent is the root, two spaces is a child, four spaces is a grandchild, and so on. Pick the indent unit (two spaces, four spaces, or a Tab) to match how you wrote the list. A line that has children is treated as a folder automatically even if you forgot the slash, so the geometry stays correct. Mixing units in one list is the usual cause of a level landing in the wrong place.

What is the difference between the branch and the last-branch glyph?

The tee-shaped branch is used for every entry that still has a sibling below it, and the L-shaped corner is used for the last child of a group, which is what closes off that branch. The vertical bar keeps drawing down the left of a group as long as more siblings follow, and turns into blank space once the corner has been printed. That pairing is what makes the tree read as a connected diagram instead of a flat list, and it is exactly what the unix tree command emits.

Should I use ASCII or Unicode connectors?

Unicode connectors look cleaner and match what GitHub, most editors and modern terminals render. Use ASCII connectors when the output has to survive a place that breaks on box-drawing characters, such as an old terminal, a plain-text email pipeline, some log viewers, or a font that shows boxes as question marks. ASCII uses a pipe and dashes for the branch and a backtick and dashes for the last branch, so the shape stays readable everywhere. Toggle it and copy whichever the target renders correctly.

Why add a slash after folder names?

A trailing slash is the convention that tells a reader an entry is a folder rather than a file with no extension, so src/ is clearly a directory while index.ts is clearly a file. The unix tree command and most README trees use it, which is why it is on by default here. If the target style omits it, turn the slash off and folders print as plain names. The tool still tracks which entries are folders internally, so turning the slash off changes only the display, not the structure.

Document a project structure in your README

A good README opens with the folder layout so a new contributor knows where things live. Type the structure as an indented list, mark the folders with a slash, and the tool draws the box-drawing tree. Paste it inside a fenced code block and it renders in monospace on GitHub. When you add a folder later, edit the list and regenerate rather than nudging box characters around by hand and breaking the alignment.

Show a directory layout in a tutorial or blog post

Writing a guide where the reader has to create a specific set of files? A tree makes the target obvious at a glance. Sketch the layout, generate the tree, and drop it in so readers can compare their own folder to the picture instead of parsing a paragraph of prose about which file goes where. Switch to ASCII connectors if your blog platform mangles the Unicode box characters.

Capture a folder layout where the tree command is not available

You are on a machine without the unix tree command, or in a sandbox, or you only have a screenshot of someone else's file explorer. Re-type the structure as an indented list and get the same output the tree command would have produced, including the branch and pipe guides, without installing anything. Copy it into a ticket, a code review, or a design doc to show exactly which files a change touches.

Plan a folder structure before you create it

Designing the layout for a new service or library is easier to reason about as a tree than as scattered notes. Draft the directories and key files as an indented list, watch the tree update live, and rearrange until it reads well. Share the URL with a teammate to agree on the shape before a single folder exists, then build it out to match.

Directory Tree Generator: ASCII Folder Tree for Your README

Turn an indented file list into a clean ASCII folder tree with box-drawing guides, choose Unicode or ASCII, then copy it into any README, browser-only

Runs locally
Category Developer & DevOps
Best for Checking file type, size, metadata, and obvious mismatch signals before sharing.

Write one file or folder per line and use indentation to show nesting; end a folder line with a slash. The tool draws the README-style tree with ├── └── and │ guides. Pick 2-space, 4-space or Tab indentation, switch between Unicode and ASCII connectors, and keep or drop the folder slash. Flip to Reverse to turn a tree back into an indented list. Everything runs in your browser and the share link reopens the exact tree.

Mode

Options

Indent per levelConnectorsAdd a slash after folders

Indented list7 entries

ASCII tree

src/
├── index.ts
├── utils/
│   ├── helper.ts
│   └── format.ts
└── types.d.ts
README.md

What this tool does

Free directory tree generator that turns a plain indented list of files and folders into the box-drawing tree people put in a README or paste into a chat. Write one entry per line, use indentation to show what sits inside what, end a folder line with a slash, and the tool draws the connectors for you. It produces the same shape the unix tree command prints, with the proper branch and pipe guides so every level lines up no matter how deep the nesting goes. You can set the indent unit to two spaces, four spaces or a Tab, switch the connectors between Unicode and plain ASCII for terminals that mangle box characters, keep or drop the trailing slash on folders, and copy the whole tree with one click. A reverse mode does the opposite: paste a finished tree and get the indented list back so you can edit a structure someone already drew and regenerate it. Everything runs in your browser as you type, nothing is uploaded, and the share link reopens the exact tree.

Tool details

Input: Files + Text; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 9 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How Directory Tree Generator fits into your work

Use it before upload, handoff, archive, support review, or any moment where a file needs one local check before it leaves your machine.

File jobs

Checking file type, size, metadata, and obvious mismatch signals before sharing.
Preparing mixed folders for upload, archive, intake, or review.
Keeping sensitive files in the browser instead of sending them to an account-based service.

File checks

Do not treat the extension alone as proof of the real file type.
Review metadata before a file goes to customers, vendors, or a public page.
Keep the original file until the copied, converted, or exported result is verified.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Document a project structure in your README
A good README opens with the folder layout so a new contributor knows where things live. Type the structure as an indented list, mark the folders with a slash, and the tool draws the box-drawing tree. Paste it inside a fenced code block and it renders in monospace on GitHub. When you add a folder later, edit the list and regenerate rather than nudging box characters around by hand and breaking the alignment.
Show a directory layout in a tutorial or blog post
Writing a guide where the reader has to create a specific set of files? A tree makes the target obvious at a glance. Sketch the layout, generate the tree, and drop it in so readers can compare their own folder to the picture instead of parsing a paragraph of prose about which file goes where. Switch to ASCII connectors if your blog platform mangles the Unicode box characters.
Capture a folder layout where the tree command is not available
You are on a machine without the unix tree command, or in a sandbox, or you only have a screenshot of someone else's file explorer. Re-type the structure as an indented list and get the same output the tree command would have produced, including the branch and pipe guides, without installing anything. Copy it into a ticket, a code review, or a design doc to show exactly which files a change touches.
Plan a folder structure before you create it
Designing the layout for a new service or library is easier to reason about as a tree than as scattered notes. Draft the directories and key files as an indented list, watch the tree update live, and rearrange until it reads well. Share the URL with a teammate to agree on the shape before a single folder exists, then build it out to match.

Common pitfalls

Mixing indent units in one list. If some lines use two spaces and others use a Tab while the tool is set to spaces, a child can land at the wrong depth or jump under the wrong parent. Pick one unit, set the tool to match, and keep the whole list consistent.
Forgetting the trailing slash on folders. Without it, a folder with no children looks like a file, so an empty directory like assets/ shows as plain assets. Add the slash to any folder, especially leaf folders that hold nothing yet, so readers can tell directories from files.
Pasting the rendered tree somewhere that breaks box characters. A Unicode tree turns into question marks or boxes in some terminals, log viewers and plain-text email. If the target garbles it, switch the connectors to ASCII and copy again so the shape survives.

Privacy

Building the tree is plain JavaScript that runs entirely in your browser tab: the file and folder names you type never leave the page and are never logged, so you can sketch the layout of an unreleased or internal project without it going anywhere. One caveat: the shareable URL encodes your list in the query string, so a share link pasted into chat records those names in the recipient server's access log, and a very long structure is dropped from the link while the tool keeps working on screen. For a confidential layout, use the copy button and paste the text rather than sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Developer

Browse all tools for this role

Directory Tree Generator: ASCII Folder Tree for Your README

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Directory Tree Generator fits into your work

File jobs

File checks

Good next steps

Real-world use cases

Document a project structure in your README

Show a directory layout in a tutorial or blog post

Capture a folder layout where the tree command is not available

Plan a folder structure before you create it

Common pitfalls

Privacy

FAQ

.gitignore Generator

Add Line Numbers

ASCII Art Generator

Whitespace Visualizer

AI Eval Planner

API Key Generator

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet

AWS CLI Cheatsheet

Backup Codes Generator

Barcode Generator