astro-content-devtools
Advanced tools
Browse Astro Content Collections, schemas and entry files in your browser
Browse Astro Content Collections, schemas and entry files in your browser.
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.
[!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-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>
Licensed under the MIT License, Copyright © HiDeoo.
See LICENSE for more information.
FAQs
Browse Astro Content Collections, schemas and entry files in your browser
We found that astro-content-devtools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.