Add a folder tree to your README

A directory tree shows how files and folders are organized. Create one from indented source or a local folder, then paste the output into a Markdown code block.

Open the workbench

Turn indented source into a tree

Edit the source below. The same parser and formatter used by the workbench create the result.

Use two spaces for each level. The output updates as you type.

Output
.
└── project/
    ├── src/
    │   └── App.vue
    ├── public/
    │   └── icon.svg
    └── README.md

Create README-ready output

  1. Add the structure

    Write or paste indented source. You can also choose a local folder.

  2. Choose the output

    Use Unicode for modern documentation or plain ASCII for older systems. Markdown and JSON formats are also available.

  3. Copy it into the README

    Put three backticks before and after the tree. The code block preserves spacing and keeps the branches aligned.

Choose ASCII or Unicode

Both formats are plain text. The difference is the set of branch characters.

Plain ASCII

project/
|-- src/
|   `-- App.vue
`-- README.md

Use this format when a system does not support box-drawing characters.

Unicode

project/
├── src/
│   └── App.vue
└── README.md

Use this format for clearer branches in modern editors and Markdown.

Use the tree command when you do not need to edit

A terminal command is useful when you need a direct view of an existing folder. Use Lupinum Tree when you want to edit the structure, compare formats, or plan folders that do not exist yet.

macOS and Linux

tree

Windows

tree /F /A

Your folder stays on your device

Folder import reads names and hierarchy in your browser. It does not read file contents. It does not upload the tree. Saved trees remain in this browser.

Common questions

An ASCII tree is a plain-text view of a hierarchy. Branch characters show how files and folders are nested. You can use the result in README files, documentation, code comments, issues, and chats.

Plain ASCII uses characters such as |, +, and -. Unicode uses box-drawing characters such as │, ├, and └. Use ASCII for older systems. Use Unicode for clearer output in modern editors and Markdown.

No. Folder import reads file and folder names in your browser. It does not read file contents or send the tree to a server. Saved trees stay in this browser.

Yes. Edit the indented source in the workbench. Lupinum Tree updates the output as you type. You can also change the output format and path settings.