📖 Tool Introduction

The Project File Tree Generator is a completely free, instant-use online directory visualisation tool. When you write technical documentation, publish an open-source README, or walk a team through a codebase, a clean file tree lets the reader grasp the whole layout in seconds. This tool removes the manual chore of sketching that structure: you can pick an entire project folder directly in the browser, and it walks through every relative path inside, or you can paste one path per line into the textarea, with either forward or back slashes. The two input methods can even be combined. Locally, the path list is turned into a nested tree, directories are moved ahead of files and sorted alphabetically within each level, and the result is rendered with the classic ├── and └── box-drawing symbols at each depth. Directory nodes are highlighted in teal while file nodes stay in the default colour, and the preview panel shows a live count of files and directories. Once the tree looks right, you can copy it straight into a Markdown document or download it as a .txt file. Because the tool only reads path metadata and never opens file contents, you can use it even on projects that contain sensitive source code. Everything runs locally in your browser, so the folder never touches any server. The interface is available in Simplified Chinese, Traditional Chinese and English, follows the website theme colours automatically, and works smoothly on both desktop and mobile. A built-in example loads a realistic React-style project so you can inspect the sorting, the teal directory highlights and the box-drawing connectors in a single click. Blank lines are ignored, mixed separators are normalised, and the root name is inferred automatically from the top-level folder. The output is plain text, so it pastes cleanly into README files, chat messages and documentation without any formatting loss. No registration, no installation and no network requests - just pick a folder or paste paths and build the tree.

✨ Key Features

• Two inputs: pick a whole folder to walk recursively, or paste a path list manually
• Standard symbols: ├── and └── connectors at every depth, directories in teal
• Smart ordering: directories precede files, siblings sorted alphabetically
• Mixed input: folder picking and pasted paths are merged automatically
• Live stats: file and directory counts shown at the top of the preview
• Fully local: only path metadata is read; contents are never touched or uploaded

📝 How to Use

1. Click the dashed box to pick a project folder, or paste one path per line
2. The tree is built automatically with directories first and alphabetical order
3. Inspect the preview panel and the file / directory counts
4. Click Copy Tree to paste into a README, or download as .txt
5. Click Clear to start the next directory walk

⚠️ Notes

• Path source: folder mode uses webkitRelativePath; pasted paths must be well-formed
• Separators: pasted paths accept both forward and back slashes
• Blank lines: empty lines and whitespace-only lines are ignored
• Node colours: teal rows are directories with children; plain rows are leaf files
• Huge folders: tens of thousands of files should be pasted in batches to avoid jank