Folder Structure Generator

Build a folder structure visually or upload a real folder, then copy the ASCII tree for your README or documentation.

Structure Editor

Drag and drop using the grip handle on each row. Drop between items to reorder, or drop onto a folder to move inside it.

my-project
src
components
Button.tsx
Card.tsx
pages
index.tsx
about.tsx
app.tsx
public
favicon.ico
package.json
README.md

Tip: Drag the grip handle to reorder or nest items. Double-click any name to rename. Hover to add children or delete.

ASCII Tree Output

Uses ├──, └──, and │ box characters — renders cleanly in any Markdown renderer.

Visual Editor

Build your tree interactively. Drag to reorder or nest folders, add, rename, and delete nodes.

Folder Upload

Drop in a real folder and get its tree instantly. Processed entirely in your browser.

About the Folder Structure Generator

The Folder Structure Generator creates ASCII folder-structure diagrams directly in your browser — no sign-up, no server, no data ever sent anywhere. It's ideal for documenting GitHub repositories, writing technical specs, or visualising a project layout inside a README.

Common use cases

  • GitHub README folder structure diagrams
  • Project onboarding and handover documentation
  • Technical design documents and architecture overviews
  • Visualising existing codebases via folder upload

Pro tip

Wrap the copied output in a fenced code block with the bash language hint for the cleanest render on GitHub and most Markdown renderers.

Frequently Asked Questions