Examples

Simple: i18n Locales

Show code

yaml

```tree
- name: locales
  children:
    - name: pages
      children:
        - name: index
          children:
            - en.json
            - fr.json
            - ar.json
        - name: about
          children:
            - en.json
            - fr.json
            - ar.json
    - en.json
    - fr.json
    - ar.json
```

locales1 folder, 3 files
pages2 folders
index3 files
en.json
fr.json
ar.json
about3 files
en.json
fr.json
ar.json
en.json
fr.json
ar.json

Vue Project

Show code

yaml

```tree
- name: my-app
  children:
    - name: src
      children:
        - name: components
          children:
            - name: ui
              children:
                - Button.vue
                - Modal.vue
                - Input.vue
            - Header.vue
            - Footer.vue
        - name: composables
          children:
            - useAuth.ts
            - useFetch.ts
        - name: pages
          children:
            - index.vue
            - about.vue
            - name: blog
              children:
                - index.vue
                - "[slug].vue"
        - App.vue
        - main.ts
    - name: public
      children:
        - favicon.ico
    - .gitignore
    - package.json
    - tsconfig.json
    - vite.config.ts
```

my-app2 folders, 4 files
src3 folders, 2 files
components1 folder, 2 files
ui3 files
Button.vue
Modal.vue
Input.vue
Header.vue
Footer.vue
composables2 files
useAuth.ts
useFetch.ts
pages1 folder, 2 files
index.vue
about.vue
blog2 files
index.vue
[slug].vue
App.vue
main.ts
public1 file
favicon.ico
.gitignore
package.json
tsconfig.json
vite.config.ts

Rich Metadata

Use description, note, highlight, icon, open, locked:

Show code

yaml

```tree
- name: api-server
  icon: "\U0001F680"
  description: "Backend"
  note: "v2.4.1"
  children:
    - name: src
      children:
        - name: routes
          description: "HTTP handlers"
          note: "3 endpoints"
          children:
            - name: auth.ts
              highlight: true
              description: "needs review"
              note: "PR #42"
            - users.ts
            - posts.ts
        - name: middleware
          children:
            - cors.ts
            - auth.ts
            - logger.ts
        - name: models
          open: false
          children:
            - User.ts
            - Post.ts
            - Comment.ts
        - name: db
          locked: true
          children:
            - name: connection.ts
              highlight: true
              description: "TODO: pool"
            - migrations.ts
        - index.ts
    - name: tests
      open: false
      description: "Tests"
      note: "87% coverage"
      children:
        - auth.test.ts
        - users.test.ts
        - posts.test.ts
    - name: dist
      type: folder
      locked: true
      description: "Build output"
    - package.json
    - tsconfig.json
    - name: .env
      icon: "\U0001F510"
      note: "Do not commit!"
    - Dockerfile
    - name: README.md
      note: "updated 2 days ago"
```

🚀api-serverBackendv2.4.1
src4 folders, 1 file
routesHTTP handlers3 endpoints
auth.tsneeds reviewPR #42
users.ts
posts.ts
middleware3 files
cors.ts
auth.ts
logger.ts
models3 files
User.ts
Post.ts
Comment.ts
db2 files
connection.tsTODO: pool
migrations.ts
index.ts
testsTests87% coverage
auth.test.ts
users.test.ts
posts.test.ts
distBuild output
package.json
tsconfig.json
🔐.envDo not commit!
Dockerfile
README.mdupdated 2 days ago

Links (href)

Items with href become clickable — useful for linking to documentation pages:

Show code

yaml

```tree
- name: project
  children:
    - name: src
      children:
        - name: index.ts
          href: "https://github.com/s00d/vitepress-plugin-folder-tree"
          description: "entrypoint"
        - name: config.ts
          href: "https://github.com/..."
          note: "types"
    - name: README.md
      href: "https://github.com/..."
      icon: "\U0001F4D6"
    - name: package.json
      href: "https://www.npmjs.com/..."
```

project1 folder, 2 files
src2 files
index.tsentrypoint
config.tstypes
📖README.md
package.json

ASCII Format

You can paste standard ASCII tree output directly — the plugin auto-detects the format:

Show code

text

```tree
my-project/
├── src/
│   ├── components/
│   │   ├── Button.vue
│   │   ├── Modal.vue
│   │   └── Input.vue
│   ├── composables/
│   │   ├── useAuth.ts
│   │   └── useFetch.ts
│   ├── App.vue
│   └── main.ts
├── public/
│   └── favicon.ico
├── .gitignore
├── package.json
├── tsconfig.json
└── vite.config.ts
```

my-project2 folders, 4 files
src2 folders, 2 files
components3 files
Button.vue
Modal.vue
Input.vue
composables2 files
useAuth.ts
useFetch.ts
App.vue
main.ts
public1 file
favicon.ico
.gitignore
package.json
tsconfig.json
vite.config.ts

Without a root:

Show code

text

```tree
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md
```

src2 files
index.ts
utils.ts
tests1 file
index.test.ts
package.json
README.md

Diff / Git Status

Show file changes with Git-style decorations. Use status: added, status: modified, status: deleted (or status: removed):

added — green text + A badge
modified — amber text + M badge
deleted / removed — red text + D badge + strikethrough

Show code

yaml

```tree
- name: my-app
  note: "v2.0 release"
  children:
    - name: src
      children:
        - name: components
          children:
            - name: Button.vue
              status: modified
              note: "updated props"
            - name: Modal.vue
              status: deleted
              note: "deprecated"
            - name: Drawer.vue
              status: added
              note: "new component"
            - name: Input.vue
              status: modified
        - name: pages
          children:
            - index.vue
            - name: settings.vue
              status: added
              description: "new page"
        - name: utils
          children:
            - name: helpers.ts
              status: modified
            - name: legacy.ts
              status: deleted
            - name: validators.ts
              status: added
        - App.vue
        - main.ts
    - name: package.json
      status: modified
      note: "new deps"
    - name: CHANGELOG.md
      status: added
    - tsconfig.json
```

my-app1 folder, 3 filesv2.0 release
src3 folders, 2 files
components4 files
MButton.vueupdated props
DModal.vuedeprecated
ADrawer.vuenew component
MInput.vue
pages2 files
index.vue
Asettings.vuenew page
utils3 files
Mhelpers.ts
Dlegacy.ts
Avalidators.ts
App.vue
main.ts
Mpackage.jsonnew deps
ACHANGELOG.md
tsconfig.json

Minimal example:

Show code

yaml

```tree
- name: config.ts
  status: modified
- name: new-feature.ts
  status: added
- name: old-module.ts
  status: deleted
```

Mconfig.ts
Anew-feature.ts
Dold-module.ts

Locked Folders

Folders with locked: true cannot be toggled by the user — the chevron is dimmed and a lock icon is shown. Expand all / Collapse all also respect the lock. Try clicking on db or dist below — they won't toggle.

Show code

yaml

```tree
- name: backend
  children:
    - name: src
      children:
        - name: db
          locked: true
          description: "Do not touch"
          children:
            - connection.ts
            - migrations.ts
            - seeds.ts
        - name: services
          children:
            - auth.service.ts
            - user.service.ts
    - name: dist
      locked: true
      description: "Auto-generated"
      children:
        - index.js
        - index.d.ts
    - name: config
      children:
        - database.yml
        - app.yml
    - package.json
```

backend3 folders, 1 file
src2 folders
dbDo not touch
connection.ts
migrations.ts
seeds.ts
services2 files
auth.service.ts
user.service.ts
distAuto-generated
index.js
index.d.ts
config2 files
database.yml
app.yml
package.json

Collapsed by Default

All folders start collapsed. Click to expand manually.

Use options.defaultOpen: false inside the YAML body:

yaml

```tree
options:
  defaultOpen: false
tree:
  - name: src
    children:
      - index.ts
```

Show code

yaml

```tree
options:
  defaultOpen: false
tree:
  - name: monorepo
    note: "pnpm workspace"
    children:
      - name: packages
        children:
          - name: core
            ...
```

monorepo2 folders, 4 filespnpm workspace
packages3 folders
core1 folder, 2 filesv1.0.0
src1 file
index.ts
package.json
tsconfig.json
ui1 folder, 2 filesv0.8.2
src1 folder, 1 file
components3 files
Button.tsx
Card.tsx
index.ts
index.ts
package.json
tsconfig.json
utils1 folder, 2 filesv1.2.0
src1 file
index.ts
package.json
tsconfig.json
apps2 folders
web1 folder, 1 file
src1 file
main.tsx
package.json
docs1 folder, 1 file
src1 file
index.md
package.json
package.json
pnpm-workspace.yaml
turbo.json
README.md

No toolbar — no expand/collapse buttons, no copy, no search.

Show code

yaml

```tree
options:
  showToolbar: false
tree:
  - name: my-lib
    children:
      - name: src
        children:
          - index.ts
          - utils.ts
          - types.ts
      - name: tests
        children:
          - index.test.ts
          - utils.test.ts
      - package.json
      - tsconfig.json
      - README.md
```

my-lib2 folders, 3 files
src3 files
index.ts
utils.ts
types.ts
tests2 files
index.test.ts
utils.test.ts
package.json
tsconfig.json
README.md

Static Mode (non-interactive)

Fully static tree — no toggling, no toolbar. Pure snapshot.

Show code

yaml

```tree
options:
  interactive: false
tree:
  - name: snapshot
    children:
      - name: src
        children:
          - main.rs
          - lib.rs
          - name: modules
            children:
              - parser.rs
              - compiler.rs
      - Cargo.toml
      - Cargo.lock
      - README.md
```

snapshot1 folder, 3 files
src1 folder, 2 files
main.rs
lib.rs
modules2 files
parser.rs
compiler.rs
Cargo.toml
Cargo.lock
README.md

Combined Options

Combine multiple options at once:

Show code

yaml

```tree
options:
  defaultOpen: false
  showBadges: false
tree:
  - name: app
    children:
      - name: frontend
        children:
          - name: src
            children:
              - App.vue
              - main.ts
          - package.json
      - name: backend
        children:
          - name: src
            children:
              - index.ts
              - server.ts
          - package.json
      - docker-compose.yml
      - README.md
```

app
frontend
src
App.vue
main.ts
package.json
backend
src
index.ts
server.ts
package.json
docker-compose.yml
README.md

Load from URL

Load the tree from an external file — supports YAML, JSON, and JS modules.

YAML file

yaml

```tree
url: /trees/vue-project.yaml
```

vue-appVue 3 starterv1.0.0
src4 folders, 3 files
components2 folders, 1 file
ui4 files
Button.vue
Modal.vue
Input.vue
Dropdown.vue
layout3 files
Header.vue
Footer.vue
Sidebar.vue
AppLogo.vue
composables3 files
useAuth.ts
useFetch.ts
useTheme.ts
pages1 folder, 2 files
index.vue
about.vue
blog2 files
index.vue
[slug].vue
stores2 files
auth.ts
app.ts
App.vue
main.ts
router.ts
public2 files
favicon.ico
robots.txt
tests2 folders92% coverage
unit2 files
Button.test.ts
useAuth.test.ts
e2e2 files
login.spec.ts
navigation.spec.ts
.gitignore
.env.example
package.json
tsconfig.json
vite.config.ts
📖README.md

JS module (local file)

JS files use export default — supports arrays, objects, and functions. The module is executed at build time in Node.js, so you can use fs, path, and other Node APIs.

This example reads a local JSON file and builds the tree from it:

Show vue-project.js

// public/trees/vue-project.js
import { readFileSync } from 'fs';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

export default function () {
  const __dir = dirname(fileURLToPath(import.meta.url));
  const data = JSON.parse(readFileSync(join(__dir, 'vue-project-data.json'), 'utf-8'));

  return [
    {
      name: 'vue-app',
      description: data.framework,
      note: `v${data.version}`,
      children: [
        { name: 'src', children: [
          { name: 'components', children: [
            { name: 'ui', children: data.components },
            'Header.vue',
          ]},
          { name: 'composables', children: data.composables },
          // ...
        ]},
      ],
    },
  ];
}

yaml

```tree
url: /trees/vue-project.js
```

vue-appVue 3v3.5.0
src3 folders, 3 files
components1 folder, 2 files
ui3 files
Button.vue
Modal.vue
Input.vue
Header.vue
Footer.vue
composables3 files
useAuth.ts
useFetch.ts
useTheme.ts
pages1 folder, 2 files
index.vue
about.vue
blog2 files
index.vue
[slug].vue
App.vue
main.ts
router.ts
public2 files
favicon.ico
robots.txt
tests2 folders92% coverage
unit2 files
Button.test.ts
useAuth.test.ts
e2e2 files
login.spec.ts
navigation.spec.ts
.gitignore
.env.example
package.json
tsconfig.json
vite.config.ts
📖README.md

JS module (fetch)

You can also use fetch() to load data from an HTTP URL. The function can be async:

Show example

// public/trees/remote-project.js
export default async function () {
  const res = await fetch('https://api.example.com/project-structure.json');
  const data = await res.json();

  return [
    {
      name: data.name,
      children: data.files.map(f => ({ name: f })),
    },
  ];
}

yaml

```tree
url: /trees/remote-project.js
```

URL + options

Show code

yaml

```tree
url: /trees/vue-project.yaml
options:
  defaultOpen: false
  showBadges: false
```

vue-appVue 3 starterv1.0.0
src
components
ui
Button.vue
Modal.vue
Input.vue
Dropdown.vue
layout
Header.vue
Footer.vue
Sidebar.vue
AppLogo.vue
composables
useAuth.ts
useFetch.ts
useTheme.ts
pages
index.vue
about.vue
blog
index.vue
[slug].vue
stores
auth.ts
app.ts
App.vue
main.ts
router.ts
public
favicon.ico
robots.txt
tests92% coverage
unit
Button.test.ts
useAuth.test.ts
e2e
login.spec.ts
navigation.spec.ts
.gitignore
.env.example
package.json
tsconfig.json
vite.config.ts
📖README.md

Monorepo (large tree — try search!)

Use the search field in the toolbar to filter files by name:

Show code

yaml

```tree
- name: monorepo
  note: "pnpm workspace"
  children:
    - name: packages
      children:
        - name: core
          note: "v1.0.0"
          children:
            - name: src
              children:
                - index.ts
            - package.json
            - tsconfig.json
        - name: ui
          note: "v0.8.2"
          children:
            - name: src
              children:
                - name: components
                  children:
                    - Button.tsx
                    - Card.tsx
                    - index.ts
                - index.ts
            - package.json
            - tsconfig.json
        - name: utils
          note: "v1.2.0"
          children:
            - name: src
              children:
                - index.ts
            - package.json
            - tsconfig.json
    - name: apps
      children:
        - name: web
          children:
            - name: src
              children:
                - main.tsx
            - package.json
        - name: docs
          children:
            - name: src
              children:
                - index.md
            - package.json
    - name: .github
      open: false
      children:
        - name: workflows
          children:
            - ci.yml
            - release.yml
    - package.json
    - pnpm-workspace.yaml
    - turbo.json
    - README.md
```

monorepo3 folders, 4 filespnpm workspace
packages3 folders
core1 folder, 2 filesv1.0.0
src1 file
index.ts
package.json
tsconfig.json
ui1 folder, 2 filesv0.8.2
src1 folder, 1 file
components3 files
Button.tsx
Card.tsx
index.ts
index.ts
package.json
tsconfig.json
utils1 folder, 2 filesv1.2.0
src1 file
index.ts
package.json
tsconfig.json
apps2 folders
web1 folder, 1 file
src1 file
main.tsx
package.json
docs1 folder, 1 file
src1 file
index.md
package.json
.github1 folder
workflows2 files
ci.yml
release.yml
package.json
pnpm-workspace.yaml
turbo.json
README.md

Auto-generate from Filesystem

Scan a real directory at build time — no manual YAML needed:

yaml

```tree
from: ./src
depth: 3
```

src5 folders, 6 files
components15 files
FileIcon.vue
FileNode.vue
FloatingPanel.vue
FolderIcon.vue
FolderNode.vue
NodeBadge.vue
NodeNote.vue
NodeStatusBadge.vue
TreeContextMenu.vue
TreeDownloadMenu.vue
TreeFooter.vue
TreeSearch.vue
TreeTabs.vue
TreeToolbar.vue
TreeTooltip.vue
composables11 files
useClickOutside.ts
useClipboard.ts
useEventListener.ts
useTreeClipboard.ts
useTreeContextMenu.ts
useTreeDeepLink.ts
useTreeExpand.ts
useTreeKeyboard.ts
useTreeSearch.ts
useTreeTabs.ts
useTreeTooltip.ts
markdown5 files
index.ts
parser.ts
resolver.ts
scanner.ts
validation.ts
styles1 file
tailwind.css
utils7 files
constants.ts
icons.ts
search-helpers.ts
tree-helpers.ts
tree-parser.ts
tree-validator.ts
types.ts
client.ts
config.ts
folder-tree-plugin.ts
index.ts
shims-vue.d.ts
VpFolderTree.vue

With filtering — only .ts files:

Show code

yaml

```tree
from: ../src
name: "TypeScript source"
include:
  - "*.ts"
options:
  defaultOpen: false
```

TypeScript source3 folders, 5 files
composables11 files
useClickOutside.ts
useClipboard.ts
useEventListener.ts
useTreeClipboard.ts
useTreeContextMenu.ts
useTreeDeepLink.ts
useTreeExpand.ts
useTreeKeyboard.ts
useTreeSearch.ts
useTreeTabs.ts
useTreeTooltip.ts
markdown5 files
index.ts
parser.ts
resolver.ts
scanner.ts
validation.ts
utils7 files
constants.ts
icons.ts
search-helpers.ts
tree-helpers.ts
tree-parser.ts
tree-validator.ts
types.ts
client.ts
config.ts
folder-tree-plugin.ts
index.ts
shims-vue.d.ts

Without root wrapper:

Show code

yaml

```tree
from: ../src
showRoot: false
exclude:
  - "*.vue"
```

components
composables11 files
useClickOutside.ts
useClipboard.ts
useEventListener.ts
useTreeClipboard.ts
useTreeContextMenu.ts
useTreeDeepLink.ts
useTreeExpand.ts
useTreeKeyboard.ts
useTreeSearch.ts
useTreeTabs.ts
useTreeTooltip.ts
markdown5 files
index.ts
parser.ts
resolver.ts
scanner.ts
validation.ts
styles1 file
tailwind.css
utils7 files
constants.ts
icons.ts
search-helpers.ts
tree-helpers.ts
tree-parser.ts
tree-validator.ts
types.ts
client.ts
config.ts
folder-tree-plugin.ts
index.ts
shims-vue.d.ts

With file content preview

Enable preview: true to read file contents at build time. Hover any file to see its content, click to copy:

Show code

yaml

```tree
from: ../src/composables
preview: true
depth: 2
```

composables11 files
useClickOutside.ts
useClipboard.ts
useEventListener.ts
useTreeClipboard.ts
useTreeContextMenu.ts
useTreeDeepLink.ts
useTreeExpand.ts
useTreeKeyboard.ts
useTreeSearch.ts
useTreeTabs.ts
useTreeTooltip.ts

With limits

Control preview size and open depth:

Option	Type	Default	Description
`preview`	`boolean`	`false`	Read file contents into tooltip
`maxPreviewSize`	`number`	`4096`	Max file size in bytes for preview
`previewExtensions`	`string[]`	common text exts	Which extensions to read
`openDepth`	`number`	`-1` (all)	Max depth to auto-open (`0` = all closed, `1` = only root, etc.)

Show code

yaml

```tree
from: ../src/utils
preview: true
maxPreviewSize: 2048
openDepth: 1
```

utils7 files
constants.ts
icons.ts
search-helpers.ts
tree-helpers.ts
tree-parser.ts
tree-validator.ts
types.ts

Open depth only

Use openDepth without preview to control how many levels are expanded:

Show code

yaml

```tree
from: ../src
openDepth: 0
depth: 3
```

src5 folders, 6 files
components15 files
FileIcon.vue
FileNode.vue
FloatingPanel.vue
FolderIcon.vue
FolderNode.vue
NodeBadge.vue
NodeNote.vue
NodeStatusBadge.vue
TreeContextMenu.vue
TreeDownloadMenu.vue
TreeFooter.vue
TreeSearch.vue
TreeTabs.vue
TreeToolbar.vue
TreeTooltip.vue
composables11 files
useClickOutside.ts
useClipboard.ts
useEventListener.ts
useTreeClipboard.ts
useTreeContextMenu.ts
useTreeDeepLink.ts
useTreeExpand.ts
useTreeKeyboard.ts
useTreeSearch.ts
useTreeTabs.ts
useTreeTooltip.ts
markdown5 files
index.ts
parser.ts
resolver.ts
scanner.ts
validation.ts
styles1 file
tailwind.css
utils7 files
constants.ts
icons.ts
search-helpers.ts
tree-helpers.ts
tree-parser.ts
tree-validator.ts
types.ts
client.ts
config.ts
folder-tree-plugin.ts
index.ts
shims-vue.d.ts
VpFolderTree.vue

Preview & File Content

Add preview to any file node to attach its content. This enables three features:

Action	Behavior
Hover	Instantly shows a tooltip with the file content
Click	Copies the content to clipboard
Right-click → Copy Content	Copies via context menu
Shell script (`>_`)	Uses `cat << 'EOF'` instead of `touch`

Show code

yaml

```tree
- name: src
  children:
    - name: index.ts
      preview: "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')"
      description: "entrypoint"
    - name: utils.ts
      preview: "export function formatDate(d: Date) {\n  return d.toISOString().split('T')[0];\n}"
    - name: config.ts
      preview: "export interface Config {\n  port: number;\n  host: string;\n  debug: boolean;\n}"
      note: "types"
    - name: App.vue
      preview: "<template>\n  <div id=\"app\">\n    <router-view />\n  </div>\n</template>"
    - name: .env
      preview: "VITE_API_URL=http://localhost:3000\nVITE_APP_TITLE=My App\nVITE_DEBUG=true"
      note: "Do not commit!"
    - main.css
```

src6 files
index.tsentrypoint
utils.ts
config.tstypes
App.vue
.envDo not commit!
main.css

Tip: Hover over any file above to see the tooltip. Click to copy its content. Right-click for the "Copy Content" menu item. Files without preview (like main.css) behave normally. Try the >_ shell button — files with content use cat << 'EOF' instead of touch.

Open the context menu on any node using one of these methods:

Method	How
Right-click	Standard right mouse button on a node
Ctrl + Click	Hold `Ctrl` (or `Cmd` on Mac) and left-click a node
Shift + F10	Focus a row with arrow keys, then press `Shift + F10`

The context menu provides:

Copy Name — copies just the file/folder name (e.g. Button.vue)
Copy Path — copies the full tree path (e.g. src/components/Button.vue)

Press Escape to close the menu.

Try all three methods on the tree below:

Show code

yaml

```tree
- name: project
  children:
    - name: src
      children:
        - name: components
          children:
            - name: Button.vue
              description: "right-click me!"
            - Modal.vue
            - Input.vue
        - name: utils
          children:
            - helpers.ts
            - format.ts
        - App.vue
        - main.ts
    - package.json
    - tsconfig.json
```

project1 folder, 2 files
src2 folders, 2 files
components3 files
Button.vueright-click me!
Modal.vue
Input.vue
utils2 files
helpers.ts
format.ts
App.vue
main.ts
package.json
tsconfig.json

Shell Script Generation

Click the >_ (terminal) button in any toolbar to copy a shell script that recreates the folder structure. The generated script uses mkdir -p for folders and touch for files. Paste it into your terminal to scaffold the project instantly.

Try it on any tree above!

Deep Linking (Focus via URL)

Append a #path to the page URL to auto-expand and focus a specific node. The tree will:

Expand all ancestor folders
Scroll to the target node
Highlight it with a pulse animation

Example: add #my-app/src/components/ui/Button.vue to the URL hash and the Vue Project tree will expand and highlight that file.

Tabs Mode

Use the tab field on root-level items to create switchable tabs — perfect for comparing "Before vs After" or "Client vs Server" structures:

Show code

yaml

```tree
- tab: "Frontend"
  children:
    - name: src
      children:
        - name: components
          children:
            - Button.vue
            - Modal.vue
        - App.vue
        - main.ts
    - package.json
    - vite.config.ts
- tab: "Backend"
  children:
    - name: src
      children:
        - name: routes
          children:
            - auth.ts
            - users.ts
        - name: middleware
          children:
            - cors.ts
            - logger.ts
        - index.ts
    - package.json
    - tsconfig.json
- tab: "Shared"
  children:
    - name: packages
      children:
        - name: types
          children:
            - index.d.ts
            - api.d.ts
        - name: utils
          children:
            - format.ts
            - validate.ts
    - pnpm-workspace.yaml
```

src1 folder, 2 files
components2 files
Button.vue
Modal.vue
App.vue
main.ts
package.json
vite.config.ts

Tabs with diff statuses:

Show code

yaml

```tree
- tab: "Before"
  children:
    - name: src
      children:
        - name: utils.ts
          note: "old helpers"
        - name: legacy.ts
          note: "will be removed"
        - main.ts
- tab: "After"
  children:
    - name: src
      children:
        - name: utils.ts
          status: modified
          note: "refactored"
        - name: legacy.ts
          status: deleted
        - main.ts
        - name: validators.ts
          status: added
          note: "new module"
```

src3 files
utils.tsold helpers
legacy.tswill be removed
main.ts

Click on any tree or press Tab to focus it, then use:

Key	Action
`↓` Arrow Down	Move focus to next row
`↑` Arrow Up	Move focus to previous row
`→` Arrow Right	Expand focused folder
`←` Arrow Left	Collapse focused folder
`Enter` / `Space`	Toggle folder open/close
`Shift + F10`	Open context menu for focused row
`Escape`	Close context menu or tooltip
`Tab`	Enter / exit tree area

Modifier keys

Modifier	Action
`Ctrl + Click` (Win/Linux)	Open context menu on clicked node
`Cmd + Click` (Mac)	Open context menu on clicked node

File Icon Colors (all extensions)

Visual test of all supported file extensions grouped by color:

Show code

yaml

```tree
- name: "all-extensions"
  children:
    - name: "JavaScript (amber)"
      children:
        - app.js
        - module.mjs
        - legacy.cjs
        - component.jsx
        - .env
        - .npmrc
        - .nvmrc
        - main.nim
        - template.ejs
    - name: "TypeScript (blue)"
      children:
        - app.ts
        - module.mts
        - legacy.cts
        - component.tsx
        - types.d_ts
    - name: "Vue / Nunjucks (emerald)"
      children:
        - App.vue
        - layout.njk
        - config.vim
    - name: "HTML / Svelte / Rust (orange)"
      children:
        - index.html
        - page.htm
        - logo.svg
        - App.svelte
        - main.rs
        - lib.zig
        - template.hbs
        - page.pug
    - name: "Java / Gradle (red)"
      children:
        - Main.java
        - app.jar
        - build.gradle
    - name: "Git (orange)"
      children:
        - .git
        - .gitignore
        - .gitattributes
        - .gitmodules
    - name: "JSON / Data (teal)"
      children:
        - data.json
        - config.json5
        - settings.jsonc
        - stream.jsonl
        - events.ndjson
    - name: "YAML / TOML (lime)"
      children:
        - config.yaml
        - ci.yml
        - settings.toml
    - name: "XML / CSV (orange / green)"
      children:
        - feed.xml
        - data.csv
        - data.tsv
    - name: "Config (gray)"
      children:
        - settings.ini
        - app.cfg
        - server.conf
        - db.properties
        - package-lock.lock
        - bun.lockb
        - LICENSE.lic
        - LICENSE.license
        - .editorconfig
        - .prettierrc
        - .eslintrc
        - .babelrc
        - .browserslistrc
        - schema.proto
        - service.thrift
    - name: "Fonts (gray)"
      children:
        - font.woff
        - font.woff2
        - font.ttf
        - font.otf
        - font.eot
    - name: "Markdown / Docs (sky)"
      children:
        - README.md
        - docs.mdx
        - guide.rst
        - manual.adoc
        - paper.tex
        - thesis.latex
    - name: "Docker (sky)"
      children:
        - Dockerfile.dockerfile
        - .dockerignore
    - name: "Dart (sky)"
      children:
        - main.dart
    - name: "CSS (indigo)"
      children:
        - style.css
        - theme.less
        - base.styl
        - main.stylus
    - name: "SCSS / Sass (pink)"
      children:
        - theme.scss
        - base.sass
    - name: "GraphQL (fuchsia)"
      children:
        - schema.graphql
        - query.gql
    - name: "Python (cyan)"
      children:
        - app.py
        - types.pyi
        - fast.pyx
        - gui.pyw
        - notebook.ipynb
    - name: "Go (cyan)"
      children:
        - main.go
        - go.mod
        - go.sum
    - name: "SQL / DB (cyan)"
      children:
        - query.sql
        - data.sqlite
        - app.db
        - schema.prisma
    - name: "Ruby / Perl (red)"
      children:
        - app.rb
        - tasks.rake
        - gem.gemspec
        - layout.erb
        - script.pl
        - module.pm
        - app.perl
    - name: "Kotlin / C# / F# / Scala / Elixir (violet)"
      children:
        - Main.kt
        - build.kts
        - Program.cs
        - script.csx
        - App.fs
        - script.fsx
        - repl.fsi
        - Main.scala
        - build.sbt
        - app.ex
        - test.exs
        - init.el
    - name: "Terraform / HCL (violet)"
      children:
        - main.tf
        - config.hcl
    - name: "Swift / Objective-C (rose)"
      children:
        - App.swift
        - ViewController.m
        - Bridge.mm
    - name: "PHP (slate)"
      children:
        - index.php
        - view.phtml
        - layout.blade
        - template.twig
    - name: "C / C++ (slate)"
      children:
        - main.c
        - app.cpp
        - module.cc
        - lib.cxx
        - main.h
        - app.hpp
        - lib.hxx
    - name: "R (blue)"
      children:
        - analysis.r
        - report.rmd
    - name: "Lua / V (blue)"
      children:
        - init.lua
        - main.v
    - name: "Shell / Make (stone)"
      children:
        - install.sh
        - setup.bash
        - config.zsh
        - init.fish
        - script.ps1
        - module.psm1
        - run.bat
        - build.cmd
        - Makefile.make
        - Makefile.makefile
    - name: "Images (green)"
      children:
        - photo.png
        - photo.jpg
        - photo.jpeg
        - anim.gif
        - image.webp
        - image.avif
        - favicon.ico
        - image.bmp
        - scan.tiff
        - scan.tif
    - name: "Video / Audio (rose)"
      children:
        - video.mp4
        - clip.webm
        - movie.mov
        - clip.avi
        - song.mp3
        - audio.wav
        - track.ogg
        - music.flac
    - name: "Archives (stone)"
      children:
        - archive.zip
        - backup.tar
        - data.gz
        - data.bz2
        - data.xz
        - archive.rar
        - archive.7z
    - name: "Documents (branded)"
      children:
        - report.pdf
        - letter.doc
        - letter.docx
        - budget.xls
        - budget.xlsx
        - slides.ppt
        - slides.pptx
    - name: "Binaries (neutral)"
      children:
        - module.wasm
        - data.bin
        - app.exe
        - lib.dll
        - lib.so
    - name: "Plain text (neutral)"
      children:
        - notes.txt
        - output.log
        - changes.diff
        - fix.patch
```

all-extensions35 folders
JavaScript (amber)9 files
app.js
module.mjs
legacy.cjs
component.jsx
.env
.npmrc
.nvmrc
main.nim
template.ejs
TypeScript (blue)5 files
app.ts
module.mts
legacy.cts
component.tsx
types.d_ts
Vue / Nunjucks (emerald)3 files
App.vue
layout.njk
config.vim
HTML / Svelte / Rust (orange)8 files
index.html
page.htm
logo.svg
App.svelte
main.rs
lib.zig
template.hbs
page.pug
Java / Gradle (red)3 files
Main.java
app.jar
build.gradle
Git (orange)4 files
.git
.gitignore
.gitattributes
.gitmodules
JSON / Data (teal)5 files
data.json
config.json5
settings.jsonc
stream.jsonl
events.ndjson
YAML / TOML (lime)3 files
config.yaml
ci.yml
settings.toml
XML / CSV (orange / green)3 files
feed.xml
data.csv
data.tsv
Config (gray)15 files
settings.ini
app.cfg
server.conf
db.properties
package-lock.lock
bun.lockb
LICENSE.lic
LICENSE.license
.editorconfig
.prettierrc
.eslintrc
.babelrc
.browserslistrc
schema.proto
service.thrift
Fonts (gray)5 files
font.woff
font.woff2
font.ttf
font.otf
font.eot
Markdown / Docs (sky)6 files
README.md
docs.mdx
guide.rst
manual.adoc
paper.tex
thesis.latex
Docker (sky)2 files
Dockerfile.dockerfile
.dockerignore
Dart (sky)1 file
main.dart
CSS (indigo)4 files
style.css
theme.less
base.styl
main.stylus
SCSS / Sass (pink)2 files
theme.scss
base.sass
GraphQL (fuchsia)2 files
schema.graphql
query.gql
Python (cyan)5 files
app.py
types.pyi
fast.pyx
gui.pyw
notebook.ipynb
Go (cyan)3 files
main.go
go.mod
go.sum
SQL / DB (cyan)4 files
query.sql
data.sqlite
app.db
schema.prisma
Ruby / Perl (red)7 files
app.rb
tasks.rake
gem.gemspec
layout.erb
script.pl
module.pm
app.perl
Kotlin / C# / F# / Scala / Elixir (violet)12 files
Main.kt
build.kts
Program.cs
script.csx
App.fs
script.fsx
repl.fsi
Main.scala
build.sbt
app.ex
test.exs
init.el
Terraform / HCL (violet)2 files
main.tf
config.hcl
Swift / Objective-C (rose)3 files
App.swift
ViewController.m
Bridge.mm
PHP (slate)4 files
index.php
view.phtml
layout.blade
template.twig
C / C++ (slate)7 files
main.c
app.cpp
module.cc
lib.cxx
main.h
app.hpp
lib.hxx
R (blue)2 files
analysis.r
report.rmd
Lua / V (blue)2 files
init.lua
main.v
Shell / Make (stone)10 files
install.sh
setup.bash
config.zsh
init.fish
script.ps1
module.psm1
run.bat
build.cmd
Makefile.make
Makefile.makefile
Images (green)10 files
photo.png
photo.jpg
photo.jpeg
anim.gif
image.webp
image.avif
favicon.ico
image.bmp
scan.tiff
scan.tif
Video / Audio (rose)8 files
video.mp4
clip.webm
movie.mov
clip.avi
song.mp3
audio.wav
track.ogg
music.flac
Archives (stone)7 files
archive.zip
backup.tar
data.gz
data.bz2
data.xz
archive.rar
archive.7z
Documents (branded)7 files
report.pdf
letter.doc
letter.docx
budget.xls
budget.xlsx
slides.ppt
slides.pptx
Binaries (neutral)5 files
module.wasm
data.bin
app.exe
lib.dll
lib.so
Plain text (neutral)4 files
notes.txt
output.log
changes.diff
fix.patch

Examples

Simple: i18n Locales

Vue Project

Rich Metadata

Links (href)

ASCII Format

Diff / Git Status

Locked Folders

Collapsed by Default

Static Mode (non-interactive)

Combined Options

Load from URL

YAML file

JS module (local file)

JS module (fetch)

URL + options

Monorepo (large tree — try search!)

Auto-generate from Filesystem

With file content preview

With limits

Open depth only

Preview & File Content

Context Menu

Shell Script Generation

Deep Linking (Focus via URL)

Tabs Mode

Keyboard Navigation

Modifier keys

File Icon Colors (all extensions)

Examples ​

Simple: i18n Locales ​

Vue Project ​

Rich Metadata ​

Links (href) ​

ASCII Format ​

Diff / Git Status ​

Locked Folders ​

Collapsed by Default ​

Hidden Toolbar ​

Static Mode (non-interactive) ​

Combined Options ​

Load from URL ​

YAML file ​

JS module (local file) ​

JS module (fetch) ​

URL + options ​

Monorepo (large tree — try search!) ​

Auto-generate from Filesystem ​

With file content preview ​

With limits ​

Open depth only ​

Preview & File Content ​

Context Menu ​

Shell Script Generation ​

Deep Linking (Focus via URL) ​

Tabs Mode ​

Keyboard Navigation ​

Modifier keys ​

File Icon Colors (all extensions) ​

Examples

Simple: i18n Locales

Vue Project

Rich Metadata

Links (href)

ASCII Format

Diff / Git Status

Locked Folders

Collapsed by Default

Hidden Toolbar

Static Mode (non-interactive)

Combined Options

Load from URL

YAML file

JS module (local file)

JS module (fetch)

URL + options

Monorepo (large tree — try search!)

Auto-generate from Filesystem

With file content preview

With limits

Open depth only

Preview & File Content

Context Menu

Shell Script Generation

Deep Linking (Focus via URL)

Tabs Mode

Keyboard Navigation

Modifier keys

File Icon Colors (all extensions)