Astro Content Viewer — Dev Toolbar App

Astro Content Viewer is a Dev Toolbar extension that allows you to browse your Astro Content Collections, inspect entries, visualize data as JSON, and preview inferred schemas directly inside your browser during development.

🚀 Features

• Automatically detects and lists all Astro content collections.

• Supports all valid Astro export patterns, including:

  • export const collections = {...}
  • export { collections }
  • export default collections
  • export default { collections }

• Scans multiple possible config file locations:

  • src/content/config.ts/js/mjs
  • src/content.config.ts/js/mjs

• Shows all entries of a selected collection.

• Displays entry data using a structured JSON viewer.

• Generates a simple auto-inferred schema from entry values.

• Clean Dev Toolbar UI: tabs, navigation, JSON preview, schema explorer.

📦 Installation

npm install -D astro-content-viewer
# or
pnpm add -D astro-content-viewer
# or
yarn add -D astro-content-viewer

🔧 Usage

Add the integration to your astro.config.mjs or astro.config.ts:

import { defineConfig } from "astro/config";
import contentViewer from "astro-content-viewer";

export default defineConfig({
  integrations: [
    contentViewer(), // Adds the Content Viewer to Astro’s Dev Toolbar
  ],
});

Once Astro Dev Server runs, open the Dev Toolbar and click Content Viewer.

🖼️ What You Can Do

Inside the Dev Toolbar:

• View all content collections.

• Open a collection and list its entries.

• Click an entry to see:

  • JSON data (pretty-printed)
  • Raw representation

• Explore automatically inferred schemas:

  • type detection
  • sample values
  • easy-to-read field overview

Perfect for debugging large content collections or third-party loaders.

🔍 Automatic Config File Detection

The integration searches for the content configuration in the following locations:

src/content/config.ts
src/content/config.js
src/content/config.mjs
src/content.config.ts
src/content.config.js
src/content.config.mjs

The system supports both named and default exports.

🤝 Contributing

Contributions are welcome! Suggestions for improvements include:

• support for Astro data collections
• markdown preview tab
• enhanced schema inference
• search and filtering capabilities
• UI improvements

Open an issue or pull request on GitHub.

📄 License

MIT © 2024