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.

FAQ

Can I reorder or move items in the visual editor?

Yes. Use the grip handle on the left of each row to drag files and folders. Drop between siblings to reorder, or drop onto a folder to move an item inside it.

How do I add the ASCII tree to my GitHub README?

Wrap the copied output in a fenced code block. Use the bash or text language hint — for example, ```bash — for the cleanest rendering on GitHub, GitLab, and most Markdown renderers.

Can I upload a real folder from my computer?

Yes. Switch to the Upload Folder tab and select a directory. The browser reads the file paths locally using the File API — nothing is ever sent to any server.

Is my structure saved between visits?

Yes — your structure is saved automatically to your browser's localStorage after every change. When you return to the page it picks up exactly where you left off. Clicking Clear resets everything including the saved state.

How deep can the folder structure be?

There is no hard limit imposed by the tool. In practice, structures beyond 8–10 levels become difficult to read in ASCII form and may exceed the width of most README renderers.

Can I share my folder structure with someone else?

Yes — click the Share button to generate a URL that encodes your entire structure as a Base64 parameter. Anyone with the link will see the exact same layout when they open it.