Markdown Tree Structure Generator

What is a Markdown directory tree?

A Markdown directory tree (also called a folder tree generator or markdown tree structure) converts indented Markdown list items into an ASCII folder tree (├──, └──, │) and back. The output matches the classic GNU tree command and macOS terminal tree—ideal for README files, project structure docs, and documentation outlines.

Feature Overview

This directory tree generator enables bidirectional conversion between Markdown-formatted lists and ASCII tree structures. Editing and conversion run entirely in your browser; the tool is free to use.

How to Use

1. Bidirectional Conversion: Edit Markdown format on the left, ASCII format on the right. Content automatically syncs between formats.
2. Markdown Editing: Enter a Markdown-formatted list in the left input box, use Tab to indent, Shift+Tab to reduce indentation, use + or - as list item markers for each line.
3. ASCII Editing: Edit the ASCII tree structure directly on the right side; changes will automatically update to corresponding Markdown format on the left.
4. Quick Copy: Click the "Copy" button on either side to copy the content in the respective format to your clipboard.

Notes

• The input Markdown list should not start with spaces.
• Use the Tab key to easily adjust indentation levels.
• The generated tree structure automatically ignores empty lines.
• You can edit from either side, and the other side will update automatically.

FAQ (essentials)

What is a markdown tree generator?

It renders nested Markdown bullets as a plain-text ASCII directory tree, or converts a tree back into a list, using CommonMark list nesting rules.

Is it free? Is my data uploaded?

Yes, it is free. All editing and conversion happen locally in your browser; your directory content is never sent to a server.

Does the output match the tree command?

Yes. Connectors like ├──, └──, and │ follow the style of GNU tree and common terminal output, ready to paste into Markdown or a README.

Technical Implementation

This tool is primarily implemented using React and TypeScript. Core functionalities include:

1. Bidirectional real-time conversion between Markdown lists and ASCII tree structures
2. Handling Tab key events for indentation functionality
3. Using useMemo and useCallback to optimize performance and avoid unnecessary recalculations
4. Integrating react-hot-toast to provide feedback on successful copying
5. Utilizing useLocalStorage to persist user input and retain previous content

API

Currently, this tool does not provide an API interface and is only available as an online tool.

FAQ

Q: What is a markdown tree / directory tree generator?

It converts indented Markdown list items into an ASCII folder tree (├──, └──, │) and back. Nesting depth follows list indentation—you never type connector characters by hand.

Q: Is it free? Is my data uploaded?

Yes, it is free. All editing and conversion run locally in your browser; your folder names and structure are not sent to any server.

Q: What style does the tree output use?

The tool produces the classic ASCII tree style using ├──, └──, and │ characters, matching GNU tree on Linux and macOS. This format works in every text editor and terminal—ideal for Markdown docs, README files, or code comments.

Q: How do I quickly create deeply nested structures?

Use indentation to represent hierarchy—each additional level of indentation creates a deeper child node. Type file and folder names in the editor and use Tab or spaces to control nesting depth. The tool automatically detects indentation and generates the appropriate tree connectors.

Q: Can I import an existing project directory?

The tool is designed for manually creating and editing tree structures. To visualize an existing directory, run the tree command in your terminal (e.g., tree -I node_modules) and paste the output into the ASCII pane for further edits. This tool is best for designing layouts from scratch or refining a planned structure.

Q: Is this a markdown tree generator or directory tree generator?

Both. Start from a Markdown tree list (indented bullets) or edit the ASCII tree directly—the tool syncs both sides. Search terms like directory tree generator, folder tree generator, and markdown tree structure describe the same workflow.