Features

Browsing Astro Content Collections entry files can sometimes be a bit cumbersome, especially when you have a lot of them spread across multiple collections. Same goes for collection schemas which are written in TypeScript using Zod and can be hard to read for non-developers.

The Astro Content Devtools are available through an Astro component using SolidJS that you can add to your project and that will provide you with a UI to browse your content collections, schemas and entry files in your browser.

• 🎈 Floating UI togglable with a button in the corner of the screen to show and hide the devtools.
• 💾 Current state stored in localStorage to remember the toggle state, selected collection and entry file across reloads and navigation.
• 📄 Preview the content of a collection entry, including the frontmatter and the body.
• 🗜️ Filterable list of collection entry files.
• 📏 Responsive and resizable UI.

> [!WARNING]
> The Astro Content Devtools are not compatible with Astro data content collections.

> [!WARNING]
> Now that Astro 4.0 has a built-in Dev Toolbar, this package should be refactored to a Dev Toolbar App.

Installation

Install the Astro Content Devtools package and its peer dependencies using your favorite package manager, e.g. with pnpm:

pnpm add -D astro-content-devtools @astrojs/solid-js solid-js

Update your Astro configuration to apply the SolidJS integration:

  import { defineConfig } from 'astro/config'
+ import solid from '@astrojs/solid-js'

  export default defineConfig({
    // …
+   integrations: [solid()],
  })

Temporarily load the Astro Content Devtools component, e.g. in a layout to make it available on all pages, and pass it the collections object from your content collections configuration:

  ---
+ import { AstroContentDevtools } from 'astro-content-devtools'
+ import { collections } from '../content/config'

  // …
  ---

  
  
    
      
    
    
      
+     
    
  

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.