File Tree

Show project and directory structure as a tree.

Sketch a folder layout so the reader sees where a file goes. Indentation and folder icons carry the structure, no ASCII art to keep aligned by hand.

src
- routes
  - docs
    - +layout.svelte
    - introduction/+page.md
- app.css
svelte.config.js
package.json

Usage

Nest FileTreeItems to nest directories; an item with children is a folder automatically. Pass folder to style an empty directory, and highlight to call out the entry a guide is about to touch.

			<script>
	import { FileTree, FileTreeItem } from 'svelte-docsmith';
</script>

<FileTree>
	<FileTreeItem name="src" folder>
		<FileTreeItem name="app.css" highlight />
	</FileTreeItem>
	<FileTreeItem name="package.json" />
</FileTree>

API reference

FileTree

Wraps its <FileTreeItem> children; no other props.

FileTreeItem

name required string

File or directory name.

folder boolean default false

Force folder styling for an empty directory.

highlight boolean default false

Emphasize the entry.