> ## Documentation Index
> Fetch the complete documentation index at: https://docs.instantschema.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro

> Server-render InstantSchema schemas in Astro

# Astro

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

## Install

```bash theme={null}
npm install @instantschema/sdk
```

## Usage

In any Astro layout or page component, fetch schemas in the frontmatter and render them as inline script tags:

```astro theme={null}
---
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.

<Note>
  For auto-detection to work, add `data-instantschema="1"` to each rendered script tag:

  ```astro theme={null}
  {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.
</Note>