VitePress Plugin Folder Tree

A plugin for VitePress — render beautiful, interactive file/folder tree diagrams from YAML in markdown code blocks.

Quick Start

• 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

4 folders · 9 files

Code:

```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
```

Features

• YAML format — structured, readable, easy to maintain
• Interactive — Click folders to expand/collapse
• Search & filter — Find files instantly in large trees
• Copy as text — Copy tree structure as ASCII art to clipboard
• Clickable links — href field makes items navigate to URLs
• Tree guide lines — Vertical connectors for clear hierarchy
• Lockable — locked: true prevents toggling a folder
• Metadata — description badge, note right-aligned text, highlight, icon
• Initial state — open: false starts folder collapsed, global defaultOpen
• Toolbar — Expand all / Collapse all / Copy / Search (hideable with showToolbar: false)
• Static mode — interactive: false renders a snapshot with no toggling
• Validation — Clear YAML error messages at build time
• Dark Mode — Full VitePress theme support

Installation

pnpm add vitepress-plugin-folder-tree

Setup

1. VitePress config — .vitepress/config.mts:

import { defineConfig } from 'vitepress'
import { withFolderTree } from 'vitepress-plugin-folder-tree'

export default withFolderTree(defineConfig({
  title: "My Site",
}))

2. Import styles — .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import 'vitepress-plugin-folder-tree/style.css'

export default {
  extends: DefaultTheme,
}

CSS is shipped as a separate file for better performance, caching, and CSP compatibility.

All Node Fields Demo

• projectRootv1.0

  • src2 folders, 1 file

    • coreDo not modify

      • engine.ts
      • runtime.ts
    • features3 files3 modules

      • auth.ts
      • billing.ts
      • notifications.ts
    • index.tsentrypointupdated today
  • distAuto-generated
  • 🔐.envsecret
  • package.json
  • 📖README.md

5 folders · 9 files

Links Demo

Items with href become clickable links:

• docs1 folder, 2 files

  • getting-started.mdStart here
  • api-reference.mdfull API
  • examples2 files

    • basic.md
    • advanced.md

2 folders · 4 files

Check out the Examples page for more.