- Notifications
You must be signed in to change notification settings - Fork2
Browse Astro Content Collections, schemas and entry files in your browser
License
HiDeoo/astro-content-devtools
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
BrowsingAstro Content Collections entry files can sometimes be a bit cumbersome, especially when you have a lot of them spread across multiple collections. Same goes forcollection schemas which are written in TypeScript usingZod and can be hard to read for non-developers.
The Astro Content Devtools are available through an Astro component usingSolidJS 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-inDev 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. withpnpm:
pnpm add -D astro-content-devtools @astrojs/solid-js solid-js
Update yourAstro 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 yourcontent 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.
SeeLICENSE for more information.
About
Browse Astro Content Collections, schemas and entry files in your browser