Currently the easiest way (excluding custom components) to visualize a directory structure is to use an ascii-based tree as follows:
your_app/
├── pubsepc.yaml
├── lib/
├── ...
└── widgetbook/
├── pubsepc.yaml
├── lib/
└── ...
Providing first-class support for this might be a good idea, to make docs more visually appealing.
Here are some examples:
-
Nextra's FileTree - Simple and interactive file tree.

-
From Next.js docs - They have a more visually appealing style, they use images instead of components to be able to annotate their images.

Currently the easiest way (excluding custom components) to visualize a directory structure is to use an ascii-based tree as follows:
Providing first-class support for this might be a good idea, to make docs more visually appealing.
Here are some examples:
Nextra's

FileTree- Simple and interactive file tree.From Next.js docs - They have a more visually appealing style, they use images instead of components to be able to annotate their images.
