GitHub - HiDeoo/astro-content-devtools: Browse Astro Content Collections, schemas and entry files in your browser

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

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'

  // …
  ---

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

License

See LICENSE for more information.