Getting Started

A Starlight component to explore and document files and folders in your project with an interactive file explorer:

• Markdown and MDX content for each file and folder, including Starlight components
• Files and folders linkable from anywhere
• Automatic file icons picked from file names with optional custom icons
• Badges to highlight important files and folders

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. Install the Starlight File Explorer component using your favorite package manager:

   npm

   npm i starlight-file-explorer

   pnpm

   pnpm add starlight-file-explorer

   yarn

   yarn add starlight-file-explorer

2. Use the component in any MDX files of your Starlight documentation site.

   src/content/docs/example.mdx

   import { FileExplorer, File, Folder } from 'starlight-file-explorer'
   
   <FileExplorer label="Project structure">
     <Folder name="src">
   
       The source code of your project.
   
       <File name="content.config.ts">
   
         The content collections configuration file.
   
       </File>
   
     </Folder>
     <File name="astro.config.mjs">
   
       The Astro configuration file.
   
     </File>
   </FileExplorer>

3. Start the development server to preview the component.

   Using the previous example, the result should look like this:

   Preview

   • Directorysrc
     • content.config.ts
   • astro.config.mjs

   src/content.config.ts

   content.config.ts

   The content collections configuration file.

For more details and examples, please refer to the usage guide.