🌳Dev

ASCII Tree Generator

Paste an indented structure (spaces/tabs) and generate an ASCII tree ready for README — ├──, └── etc. Everything in your browser.

Indented structure (2 spaces or 1 tab per level)

Generate ASCII directory trees

Those folder trees you see in READMEs, with the ├── and └── branches, give documentation a professional air. The catch is building them by hand: aligning each character one by one turns into torture. Paste an indented structure here and the tool draws the ASCII tree for you.

Write the hierarchy using spaces or tabs to mark the levels. The alignment comes out clean and the connectors land in the right spots on their own. It works well for documenting a project's structure, explaining how files are organised, or illustrating a diagram in plain text.

Generation happens in the browser itself and the result comes out ready to paste straight into your README or docs. No more aligning slashes and dashes by hand.

Frequently asked questions

How should I indent the input text?

Two spaces or one tab per level, without mixing the two. Each tab is read as two spaces and the total gets divided by two, so four spaces per level count as two levels at once and the tree grows branches that were never there. Odd indentation, three spaces for instance, lands on a broken level and the connectors stop lining up. A blank line is dropped, and whatever follows the indentation is copied verbatim: trailing slash, comment, anything typed.

Can the tool read a folder from my computer?

No, there is no upload and no directory picker. You type or paste the structure into the text box and it draws the connectors; nothing leaves the browser. A handy way to produce the input is running tree -i --noreport or find . -type d in a terminal and pasting the indented output. It draws no distinction between a folder and a file either, so a trailing slash on a folder name has to be typed in with the name.

Why is there a stray vertical bar in the tree?

That happens when more than one item sits at level zero. Root lines print with no connector of their own, yet their descendants still draw the column for level zero, so a vertical stroke appears pointing at nothing: put a README.md next to src and the button.js line, two levels down, picks one up. For clean output, build one root at a time and paste the second tree separately.

Related Tools

📋

Markdown Table Generator

Build Markdown tables visually — add rows and columns, edit cells and copy the GFM syntax ready for README, Notion or GitHub. No manual formatting.

📝

Markdown Cheatsheet

Quick reference for Markdown syntax, filterable by keyword: headings, lists, links, tables, code and more. Shows the raw syntax next to what it does.

📘

README.md Generator

Build a professional README.md filling in name, description, badges, install, usage, license. Markdown preview side-by-side.

📑

Markdown TOC Generator

Generate the table of contents of a Markdown file from headings (#, ##, ###). Includes GitHub-style anchors. Everything in your browser.

⏱️

Retry-After Header Parser (HTTP 429 and 503)

Paste a Retry-After value in delay seconds or HTTP-date form to get the wait in seconds and minutes, or the exact instant to try again.

🎯

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.