> ## 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.

# Integration Overview

> Compare all InstantSchema integration methods

# Integration Overview

Choose the method that fits your stack. The main tradeoff is **SEO fidelity**: server-side methods render schemas into the HTML source; client-side methods inject them after JavaScript runs.

## Comparison

| Method                                       | Schemas in HTML source | Works without JS | Auto-detected    | Recommended for       |
| -------------------------------------------- | ---------------------- | ---------------- | ---------------- | --------------------- |
| [Next.js SDK](/integrations/nextjs)          | ✅ Yes                  | ✅ Yes            | ✅ On next scan   | Next.js App Router    |
| [Astro](/integrations/astro)                 | ✅ Yes                  | ✅ Yes            | ✅ On next scan   | Astro sites           |
| [Nuxt](/integrations/nuxt)                   | ✅ Yes                  | ✅ Yes            | ✅ On next scan   | Nuxt / Vue SSR        |
| [Custom API](/integrations/api)              | ✅ Yes                  | ✅ Yes            | ⚠️ With marker   | Any SSR backend       |
| [CDN script](/integrations/cdn-script)       | ❌ Client-injected      | ❌ No             | ✅ Dashboard poll | Quick setup, any site |
| [Inline script](/integrations/inline-script) | ❌ Client-injected      | ❌ No             | ✅ Dashboard poll | Legacy / static sites |
| [GTM](/integrations/gtm)                     | ❌ Client-injected      | ❌ No             | ❌ Manual confirm | Non-technical teams   |

<Note>
  **Custom API auto-detection** requires adding `data-instantschema="1"` to each rendered `<script type="application/ld+json">` tag. Without that attribute, the dashboard cannot distinguish your schemas from other JSON-LD on the page and manual confirmation is required.
</Note>

## How detection works

InstantSchema detects integration by scanning your homepage's HTML source (no JavaScript is executed):

* **npm / SDK** — looks for `data-instantschema="1"` on any `<script type="application/ld+json">` tag
* **CDN script** — looks for `/v1/loader.js` + `data-project-id="YOUR_PROJECT_ID"` in a script tag
* **Inline script** — looks for the fetch call to `/api/v1/structured-data?project=YOUR_PROJECT_ID`
* **GTM** — not detectable from HTML; requires manual "Mark as active" in the dashboard

The dashboard also polls your live site every 8 seconds while the integration is unconfirmed, so detection is near-instant once you deploy.

## Which method should I use?

**Use the Next.js SDK** if you're on Next.js App Router — it's the easiest path to server-side schemas with zero configuration beyond the middleware snippet.

**Use CDN script** if you want the fastest setup and you're okay with client-side injection. Good for most marketing sites.

**Use GTM** if your team deploys through Tag Manager and can't touch the codebase.

**Use the raw API** if you have a custom SSR setup (Laravel, Rails, Django, etc.) and want full control.