Add a Folder Tree to a README
Generate a clean project-structure tree to document your repository.
Indent with spaces or tabs to nest items. Each deeper indent becomes a child.
my-project βββ src β βββ components β β βββ Button.tsx β β βββ Modal.tsx β βββ lib β β βββ utils.ts β βββ index.ts βββ public β βββ favicon.ico βββ package.json βββ README.md
π‘ Paste a folder structure (or any nested outline) and get a clean tree you can drop into a README, a comment, or documentation. Use the ASCII style for environments that donβt render box-drawing characters. Everything runs in your browser.
README tips
Paste your folder layout as an indented list and drop the generated tree inside a fenced code block in your README.
Unicode connectors (βββ βββ) render nicely on GitHub; switch to ASCII for plain-text environments.
Keep it focused β show the important folders and files, not every node, so readers grasp the structure fast.
Runs entirely in your browser.
Paano ito Gumagana
Bakit gamitin ang aming kasangkapan?
Also check outβ¦
Document a Project Structure
Create a directory tree for technical docs and wik
Make a Tree for a Code Comment
Generate a structure diagram to embed in source-co
Show a File Tree in a Talk
Create a clean directory diagram for slides and tu
Turn an Outline into a Tree
Visualise any nested outline β not just files β as
