astro-dev-toolbar-json-ld

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