---
title: "Framework integrations"
description: "Where to put the CanaryLytics script tag in plain HTML, Vite, Next.js App Router, Astro and TanStack Start, plus the pre-init fallback for async script injection."
last_updated: "2026-07-30"
---
# Framework integrations
The snippet is a single `
```
Add it directly to `index.html`. Vite serves that as static HTML, so the tag reaches the browser unmodified:
```html title="index.html"
```
```tsx title="app/layout.tsx"
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```astro title="src/layouts/Layout.astro"
---
---
```
Add it to the root route's `head` config:
```tsx title="src/routes/__root.tsx"
export const Route = createRootRoute({
head: () => ({
// ...meta, links, etc.
scripts: [
{ src: "https://cdn.analytics.canarycoders.es/lytics.js", defer: true, "data-domain": "myapp.com" },
],
}),
// ...
});
```
For any framework not listed here: if it can render a literal `