Code Tree

Display a hierarchical file structure with expandable folders and file preview, perfect for showcasing project structures and code organization.

Overview

The ProseCodeTree component renders an interactive file tree navigator that displays code files in a two-panel layout. The left panel shows the directory structure with expandable folders, while the right panel displays the selected file's content with syntax highlighting.

Features

Interactive Navigation - Click folders to expand/collapse, click files to view content
Material Icons - Beautiful file and folder icons based on file extensions
Auto-expansion - Automatically expands path to selected file
Keyboard Accessible - Full keyboard navigation support
Responsive - Adapts to mobile and desktop screens
Sort Intelligence - Folders first, then alphabetically

Basic Usage

Select a file to view its content

Project Showcase

Show a complete project structure:

Select a file to view its content

Expand All Folders

Use expandAll to show the full structure at once:

Select a file to view its content

Component Library Structure

Perfect for documenting UI component libraries:

Select a file to view its content

Configuration Files

Show configuration setups:

Select a file to view its content

API Documentation

Document API endpoints:

Select a file to view its content

Testing Structure

Show test organization:

Select a file to view its content

Props

Prop	Type	Default	Description
`defaultValue`	`string`	-	Default file path to select on mount (e.g., `"src/main.ts"`)
`expandAll`	`boolean`	`false`	Expand all directories by default instead of just the path to selected file
`title`	`string`	-	Optional title displayed above the file tree
`class`	`string`	-	Additional CSS classes for the root container

Syntax

Basic Structure

::prose-code-tree

```language [path/to/file.ext]
code content
```

```language [another/file.ext]
more code
```

::

With Props

::prose-code-tree{defaultValue="src/App.vue" title="My Project"}

```vue [src/App.vue]
<template>
  <div>Hello</div>
</template>
```

::

With Expand All

::prose-code-tree{expandAll title="Full Structure"}

```ts [src/utils/helpers.ts]
export function helper() {}
```

::

File Path Format

The file path in brackets [path/to/file.ext] determines the tree structure:

file.txt - Root level file
folder/file.txt - File inside folder
folder/subfolder/file.txt - Nested structure
Folders are created automatically from paths
Files are sorted alphabetically within folders
Folders always appear before files

The component supports full keyboard navigation:

Arrow Up/Down - Navigate between files and folders
Arrow Right - Expand folder
Arrow Left - Collapse folder
Enter/Space - Select file or toggle folder
Tab - Move focus to next interactive element
Home - Jump to first item
End - Jump to last item

Accessibility Features

The component is built with accessibility in mind:

✅ Semantic HTML - Uses <nav>, <button>, and proper ARIA attributes
✅ ARIA Labels - Descriptive labels for folders and files
✅ ARIA Expanded - Indicates folder open/closed state
✅ ARIA Live Regions - Announces content changes to screen readers
✅ Keyboard Navigation - Full keyboard support
✅ Focus Indicators - Visible focus rings for keyboard users
✅ Screen Reader Friendly - Proper announcements and structure

Vue Component Usage

You can also use it programmatically:

<template>
  <ProseCodeTree default-value="src/App.vue" title="My Project" expand-all>
    <ProsePre filename="src/App.vue" language="vue" :code="appCode" />
    <ProsePre filename="src/utils.ts" language="typescript" :code="utilsCode" />
  </ProseCodeTree>
</template>

<script setup>
  const appCode = ref(`<template>...</template>`);
  const utilsCode = ref(`export function...`);
</script>

Best Practices

Tips for Code Trees

Use descriptive file paths that match real project structure
Group related files in folders for better organization
Set defaultValue to the most important file
Use title to provide context about what's being shown
Keep the number of files reasonable (10-20 max for best UX)
Use meaningful file extensions for proper icon display
Consider using expandAll for small structures (< 5 folders)
Organize tests, components, and utilities in separate folders

Common Patterns

Starter Template

Show a complete starter project:

Select a file to view its content

Documentation

Document a feature with related files:

Select a file to view its content

Performance

The component is optimized for performance:

Lazy Rendering - Only renders visible nodes
Smart Re-renders - Only updates when selection changes
Efficient Sorting - Cached sort results
Virtual Scrolling - Tree viewport uses max-height with scroll

Code Snippet

Dynamically import and display code from your project files or external URLs without duplicating content in your documentation.

Collapsible

Hide and reveal content with a collapsible component featuring customizable icons and labels.