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
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.