0.0.4 • Public • Published

astro-content-devtools 🔬

Browse Astro Content Collections, schemas and entry files in your browser.

Entry data preview in astro-content-devtools Schema preview in astro-content-devtools


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.


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'

  // …

  <!DOCTYPE html>
  <html lang="en">
      <!-- … -->
      <slot />
+     <AstroContentDevtools collections={collections} />


Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.

Package Sidebar


npm i astro-content-devtools

Weekly Downloads






Unpacked Size

75.6 kB

Total Files


Last publish


  • hideoo