Tree to Files

Transform ASCII tree diagrams into real file structures with a single click!

Demo

Have you ever copied a project structure from documentation, a tutorial, or ChatGPT and wished you could instantly create all those files and folders? Now you can!

Tree to Files is a VS Code extension that takes ASCII tree diagrams (like the ones you see in documentation everywhere) and generates the actual file and folder structure for you. No more creating files one by one!

Features at a Glance

Installation

From VS Code Marketplace (Recommended)

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on Mac)
3. Search for "Tree to Files"
4. Click Install
5. You're ready to go!

From VSIX File

code --install-extension tree-to-files-1.0.0.vsix

Quick Start

• The 3-Step Magic:

  • Step 1: Copy or select any tree structure
  • Step 2: Press Ctrl+Shift+G
  • Step 3: Choose where to create it That's it! Your files are ready!

• Your First Tree

  1. Copy this example:

     my-first-project/
     ├── src/
     │   ├── index.js      # Entry point
     │   └── utils.js      # Helper functions
     ├── tests/
     │   └── index.test.js
     ├── package.json
     └── README.md
     

  2. Select the text in VS Code

  3. Press Ctrl+Shift+G (or Cmd+Shift+G on Mac)

  4. Choose a folder where you want to create the project

  5. Click "Open in New Window" to start working immediately

Supported Formats

Tree to Files understands multiple formats, so you can paste from almost anywhere!

1. ASCII Tree This is what you typically see in documentation and AI-generated responses:

     project/
     ├── src/
     │   ├── components/
     │   │   ├── Header.tsx
     │   │   ├── Footer.tsx
     │   │   └── Sidebar.tsx
     │   ├── utils/
     │   │   ├── helpers.ts
     │   │   └── constants.ts
     │   ├── App.tsx
     │   └── index.tsx
     ├── public/
     │   ├── index.html
     │   └── favicon.ico
     ├── package.json
     ├── tsconfig.json
     └── README.md
   

2. Markdown Lists Perfect for copying from GitHub READMEs or Markdown files:

   - project/
     - src/
       - main.py
       - utils.py
     - tests/
       - test_main.py
     - requirements.txt
     - README.md
   

3. Simple Indentation Just use spaces or tabs - we'll figure it out:

   
   project/
     src/
       main.py
       utils.py
     tests/
       test_main.py
     requirements.txt
     README.md
   

Auto-Detection Don't worry about specifying the format - Tree to Files automatically detects which format you're using!

Comment Support

Add inline comments to describe your files - they'll be preserved as headers!

Example Input

api/
├── routes/
│   ├── users.py      # User authentication endpoints
│   ├── products.py   # Product CRUD operations
│   └── orders.py     # Order management
├── models/
│   ├── user.py       # User database model
│   └── product.py    # Product database model
├── main.py           # FastAPI application entry
└── config.py         # Configuration settings

Generated users.py

  # User authentication endpoints

Boilerplate Templates

What It Does

When enabled, instead of creating empty files, it adds language-specific starter code based on the file extension.

How to Enable

• Method 1: Via Settings UI text

  1. Press Ctrl+, (or Cmd+, on Mac) to open Settings
  2. Search for "treeToFiles.addBoilerplate"
  3. Check the box ✅

• Method 2: Via settings.json

  
  {
    "treeToFiles.addBoilerplate": true
  }
  

Enable boilerplate to get starter code for your files! We support 30+ file types:

Example: React Component (.tsx) TypeScript

import React from 'react';

interface HeaderProps {
  // Add props here
}

/**
 * Header component
 */
const Header: React.FC<HeaderProps> = (props) => {
  return (
    <div>
      <h1>Header</h1>
    </div>
  );
};

export default Header;

Example: Python Script (.py) Python

#!/usr/bin/env python3
"""
main.py
"""

from typing import Any


def main() -> None:
    """Main entry point."""
    pass


if __name__ == "__main__":
    main()

Reverse: Folder to Tree

Need to share your project structure? Generate a tree from an existing folder!

How to Use?

1. Right-click any folder in the Explorer
2. Select "Copy Folder as Tree Text"
3. The tree is copied to your clipboard!
4. Paste anywhere - documentation, chat, email, etc.

Example Output:

      my-project/
      ├── src/
      │   ├── components/
      │   │   ├── Button.tsx
      │   │   └── Input.tsx
      │   ├── hooks/
      │   │   └── useAuth.ts
      │   └── App.tsx
      ├── package.json
      └── tsconfig.json

Smart Exclusions

By default, we exclude common folders you don't want:

• node_modules/
• .git/
• pycache/
• dist/
• build/
• .DS_Store'

Configure your own exclusions in settings!

Keyboard Shortcuts

Customize Shortcuts

1. Open Keyboard Shortcuts: Ctrl+K Ctrl+S
2. Search for "Tree to Files"
3. Click the pencil icon to customize

Context Menus

In the Editor (Right-Click) When you have text selected:

1. Generate Files from Tree - Create the file structure
2. Preview Tree Structure - See what will be created

In the Explorer (Right-Click on Folder)

1. Generate Tree Structure Here - Create files in this folder
2. Copy Folder as Tree Text - Copy structure to clipboard

Configuration

Access settings: bash File → Preferences → Settings → Extensions → Tree to Files

All Settings

Example settings.json:

  {
    // Always create in workspace root
    "treeToFiles.defaultLocation": "workspace",
    
    // Add starter code to all files
    "treeToFiles.addBoilerplate": true,
    
    // Skip existing files without asking
    "treeToFiles.overwriteExisting": "skip",
    
    // Always open in new window after generation
    "treeToFiles.openAfterGeneration": "always",
    "treeToFiles.openInNewWindow": true,
    
    // Custom exclude patterns
    "treeToFiles.excludePatterns": [
      "node_modules",
      ".git",
      "__pycache__",
      "*.pyc",
      ".env",
      "dist",
      "build",
      "coverage"
    ]
  }

Command Palette

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and type "Tree to Files":

Use Cases

1. Following Tutorials

   Copy project structures from tutorials and create them instantly:

     blog-app/
     ├── frontend/
     │   ├── src/
     │   │   ├── components/
     │   │   ├── pages/
     │   │   └── App.js
     │   └── package.json
     ├── backend/
     │   ├── routes/
     │   ├── models/
     │   └── server.js
     └── README.md
   

2. AI-Generated Projects

   Paste structures from ChatGPT, Claude, or Copilot:

     fastapi-microservice/
     ├── app/
     │   ├── api/
     │   │   ├── v1/
     │   │   │   ├── endpoints/
     │   │   │   │   ├── users.py
     │   │   │   │   └── items.py
     │   │   │   └── router.py
     │   │   └── deps.py
     │   ├── core/
     │   │   ├── config.py
     │   │   └── security.py
     │   ├── models/
     │   │   └── user.py
     │   └── main.py
     ├── tests/
     ├── requirements.txt
     └── Dockerfile
   

3. Documentation Generate trees for your README files:

   # Right-click on your project folder
   # Select "Copy Folder as Tree Text"
   # Paste into your README!
   

4. Project Templates

   Create your own template structures:

     react-component-template/
     ├── ComponentName/
     │   ├── index.tsx           # Re-export
     │   ├── ComponentName.tsx   # Main component
     │   ├── ComponentName.test.tsx
     │   ├── ComponentName.styles.ts
     │   └── types.ts
     └── README.md
   

5. Onboarding New Team Members Share project structures in Slack/Teams:

     "Here's our project structure:"
   
       our-monorepo/
       ├── packages/
       │   ├── web/          # React frontend
       │   ├── api/          # Node.js backend
       │   ├── shared/       # Shared utilities
       │   └── mobile/       # React Native app
       ├── tools/
       │   └── scripts/
       ├── package.json
       └── turbo.json
   

Smart Detection

Files vs Folders

Tree to Files intelligently determines what's a file and what's a folder:

Known Special Files

These are recognized as files even without extensions:

Makefile, Dockerfile, Vagrantfile, Jenkinsfile, Procfile, Gemfile, Rakefile, Brewfile, LICENSE, README, CHANGELOG, CONTRIBUTING, AUTHORS, CODEOWNERS, OWNERS

Preview Mode

Not sure what will be created? Use preview mode!

How to Preview

1. Select your tree text
2. Press Ctrl+Shift+Alt+P
3. See a visual preview with:
   • 📁 Folder icons
   • 📄 File icons
   • 💬 Comments
   • 📊 Statistics

Preview Tree Structure

Contributing

We welcome contributions! Here's how:

Report Issues

Found a bug? Open an issue with:

• Your tree input
• Expected behavior
• Actual behavior
• VS Code version
• Feature Requests
  • Have an idea? We'd love to hear it! Open a feature request.

Development

# Clone the repo
git clone https://github.com/Rohan7654/tree-to-files.git
cd tree-to-files

# Install dependencies
npm install

# Compile
npm run compile

# Run in development
# Press F5 in VS Code to launch Extension Development Host

Testing

# Run tests
npm test

# Run linting
npm run lint

License

Copyright (c) 2026 Rohan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.