astro-dev-toolbar-json-ld

An Astro Dev Toolbar plugin that detects, displays, and validates JSON-LD structured data on your pages during development.

Features

• Detects all <script type="application/ld+json"> blocks on the current page
• Displays the parsed JSON-LD in a readable format in the dev toolbar
• Validates against common Schema.org types: Article, Product, FAQPage, BreadcrumbList, Event, Recipe, Organization, LocalBusiness, Person, WebSite, WebPage
• Highlights <script> elements on the page
• Zero runtime dependencies — validation runs entirely client-side

Installation

npm install astro-dev-toolbar-json-ld

Usage

Register the integration in your astro.config.mjs:

import { defineConfig } from "astro/config";
import jsonLdDevToolbar from "astro-dev-toolbar-json-ld";

export default defineConfig({
  integrations: [jsonLdDevToolbar()],
});

The JSON-LD inspector icon will appear in the Astro Dev Toolbar when running astro dev.

Supported Schema Types

| Type | Required fields validated | |------|--------------------------| | Article / NewsArticle / BlogPosting | headline, author, datePublished | | Product | name | | FAQPage | mainEntity | | BreadcrumbList | itemListElement | | Event | name, startDate | | Recipe | name, recipeIngredient, recipeInstructions | | Organization / LocalBusiness | name | | Person | name | | WebSite / WebPage | name |

License

MIT