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
The npm package astro-content-devtools receives a total of 3 weekly downloads. As such, astro-content-devtools popularity was classified as not popular.
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
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.