Directory Tree Generator (ASCII Folder Tree)

Generate ASCII directory trees instantly — pick a Next.js, Laravel, React, or Django template, or type your own. Free, no sign-up, works in your browser.

Directory Structure Input

Start from a template

Use indentation (spaces or tabs) to define nesting, or pick a template above. Preview updates as you type.

Tip: press Ctrl/Cmd + Enter in the box to generate.

How to Use

Click a framework template (Next.js, Laravel, React, and more) to load a starter structure — or type your own folder and file names with indentation.

Edit the loaded template to match your actual project, and set root folder name, indent width, and style.

The tree updates live as you type. Copy it, copy as Markdown, or download as .txt to paste into READMEs and docs.

What is a Directory Structure Generator?

A directory structure generator turns a simple, indented list of folder and file names into a properly formatted ASCII tree — the kind you see in project README files and documentation. Instead of manually typing ├── and └── characters, list your structure (or start from a built-in framework template) and the tree renders instantly in your browser, no page reload and no install required.

Use Cases & Examples

One-Click Framework Templates

Skip typing entirely — load a common Next.js, Laravel, React, Express, Django, Flutter, or Monorepo layout with one click, then customize it to match your actual project.

README File Trees

Type or load your folder names, watch the tree render live, copy it straight into your README.md — including a ready-made Markdown code block.

Project Documentation

Explain your project structure to teammates or contributors. Works for any stack, and the Indent control handles tabs, 2-space, or 4-space codebases correctly.

Standard or Icon Style

Choose plain ASCII tree characters, or switch to fancy style which adds folder/file icons in the copied output. Pick whatever fits your doc.

No Install, Works on Any Device

Runs entirely in your browser with a live preview — no VS Code extension, no pip install, no account. Fully usable on desktop, tablet, and mobile.

Frequently Asked Questions

How do I define nested folders?
Use indentation (spaces or tabs) to define nesting. Each level of indentation becomes a child of the line above it. For example, indent "styles.css" under "css/" to make it a child.
What characters are used for the tree?
The standard ASCII tree uses ├── for middle items and └── for the last item in a group, with │ for vertical lines connecting parent folders.
Can I use this for documentation?
Yes. The output is plain text that you can paste into README files, documentation, code comments, Slack messages, or any monospaced context. Use the "Copy as Markdown" button to wrap it in a code block automatically.
Does it detect files vs folders?
Names ending with / are shown as folders. Names with file extensions (like .js, .php) are shown as files. Everything else is treated as a folder.
What is the fancy style?
Fancy style adds folder and file emoji icons (📁 and 📄) before each name for a more visual representation.
Are there pre-built templates for frameworks like Next.js or Laravel?
Yes. Click any template chip above the input box — Next.js, Laravel, React, Express, Django, Flutter, or Monorepo — to instantly load a common starter structure for that stack. You can then edit it freely before generating.
Why does my indentation come out wrong?
Mixed tabs and spaces can confuse auto-detection. Use the Indent dropdown to explicitly choose 2 Spaces, 4 Spaces, or Tabs instead of Auto if your tree looks off.

Share This Tool

Found it useful? Share it with your friends, classmates, or colleagues.

WhatsApp Facebook X Telegram LinkedIn