files() renders a file tree: folder rows toggle with a rotating chevron, folder icons swap between open/closed states, and child rows sit on an indent line (lines: false hides the guides).

Simple tree

Folders + files

src

src

lib

ui

lib

tokens.ts

components.ts

files(
  folder(fileRow('src') + fileRow('lib') + fileRow('ui'), { name: 'src' }) +
    folder(fileRow('tokens.ts') + fileRow('components.ts'), { name: 'lib' }),
);

Open by default

defaultOpen folder

styles

styles

celestial-docs.css

scripts

build.ts

files(
  folder(fileRow('styles') + fileRow('celestial-docs.css'), { name: 'styles', defaultOpen: true }) +
    folder(fileRow('build.ts'), { name: 'scripts' }),
);

Without lines

lines: false

Website Redesign

Homepage

About Page

README.md

files(
  folder(fileRow('Homepage') + fileRow('About Page'), { name: 'Website Redesign', defaultOpen: true }) +
    fileRow('README.md'),
  { lines: false },
);

Custom icons

Custom file icon

package.json

README.md

files(
  fileRow('package.json', '<svg …>…</svg>') + // any inline SVG string
    fileRow('README.md'),
);

API

Function	Signature	Description
file(name, icon?)	(string, string?) => string	A file row (custom SVG icon optional).
folder(children, { name, defaultOpen?, icon?, openIcon? })	—	A collapsible folder row; the icon swaps to openIcon when open.
files(children, { lines? })	—	The tree container; lines: false hides the indent guides.

Notes

• Folder rows are buttons wired by the runtime (data-cpd-folder-toggle), not native <details>.
• folder() takes pre-built HTML for its children; nest folders freely for deeper trees.