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.
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-jsUpdate 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>Licensed under the MIT License, Copyright © HiDeoo.
See LICENSE for more information.