File Tree Generator

The File Tree Generator is a powerful utility function that transforms nested object structures into visual file tree representations. Perfect for documentation, directory exploration, and project structure visualization.

Key Features

The generator creates ASCII-style file trees that:

• Represent nested directory structures

• Use clear visual hierarchy

• Support unlimited nesting levels

• Maintain consistent formatting

Basic Usage

1
import { generateFileTree } from '@/lib/shared/utils';
2
const tree = generateFileTree({
3
  src: {
4
    components: {
5
      'Header.tsx': null,
6
      'Footer.tsx': null,
7
    },
8
    styles: {
9
      'global.css': null,
10
    },
11
  },
12
});

Output:

1
src/
2
├── components/
3
│   ├── Header.tsx
4
│   └── Footer.tsx
5
└── styles/
6
    └── global.css

API Reference

Function Signature

1
type FileTree = {
2
  [key: string]: FileTree | null;
3
};
4

5
function generateFileTree(tree: FileTree, prefix: string = ''): string;

Function Parameters

Advanced Features

Syntax Highlighting

When combined with the Expressive Code component, you can highlight specific parts of the tree:

1
src/
2
   └── components
3
      ├── Button.tsx
4
      ├── old-component.tsx
5
      └── new-component.tsx

Common Use Cases