Skip to main content

​
Astro

Fetch schemas in your Astro component’s frontmatter and render them directly into the HTML — no JavaScript required.

​
Install

npm install @instantschema/sdk

​
Usage

In any Astro layout or page component, fetch schemas in the frontmatter and render them as inline script tags: 
---
import { fetchSchemas } from "@instantschema/sdk";
const schemas = await fetchSchemas("YOUR_PROJECT_ID", Astro.url.pathname);
---
{schemas.map(s => (
  <script type="application/ld+json" set:html={JSON.stringify(s)} />
))}
Add this to your base layout component so it runs on every page.

​
Detection

Schemas rendered this way appear in the raw HTML source. The InstantSchema dashboard detects them automatically on the next scan.
For auto-detection to work, add data-instantschema="1" to each rendered script tag:
{schemas.map(s => (
  <script type="application/ld+json" data-instantschema="1" set:html={JSON.stringify(s)} />
))}
Without this attribute the dashboard cannot distinguish your schemas from other JSON-LD on the page.