Skip to content

docs(install): add the TanStack Start guide #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Uaghazade1 merged 2 commits into from
Aug 20, 2026
Merged

docs(install): add the TanStack Start guide #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7a3e62
docs(install): add the TanStack Start guide
DeckardGer Aug 20, 2026
9ddd30c
docs(install): say where Start's HTML shell lives
DeckardGer Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions apps/web/lib/docs-frameworks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import { COLLECTOR_BASE_URL } from "@/lib/api";
* One page template renders all of them (`app/docs/install/[framework]`),
* so a guide is a list of steps here rather than a hand-built page. The
* list mirrors what `oa init` detects (`apps/cli/src/init/detect.ts`) plus
* the hosted-platform guides the CLI cannot reach (Webflow, Shopify) — the
* snippet is the same everywhere; only the file it goes into changes.
* the guides the CLI does not reach — hosted platforms (Webflow, Shopify) and
* frameworks it has no injector for yet (TanStack Start) — the snippet is the
* same everywhere; only the file it goes into changes.
*
* `SNIPPET` is the placeholder-key form of the tracker tag from
* `docs/frontend/tracker_snippet.md`; every claim in the steps is that
Expand Down Expand Up @@ -92,6 +93,54 @@ export const DOC_FRAMEWORKS: DocFramework[] = [
VERIFY_STEP,
],
},
{
slug: "tanstack-start",
name: "TanStack Start",
cliDetects: false,
steps: [
{
text: "TanStack Start has no static HTML file; the document shell and its head are declared on the root route. Add the script to the scripts array returned by head() there, next to your meta and links.",
code: `import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";

export const Route = createRootRoute({
head: () => ({
meta: [{ charSet: "utf-8" }],
scripts: [
{
src: "${COLLECTOR_BASE_URL}/oa.js",
async: true,
"data-key": "YOUR_TRACKING_KEY",
"data-collector": "${COLLECTOR_BASE_URL}",
},
],
}),
shellComponent: RootDocument,
});`,
caption: "src/routes/__root.tsx",
},
{
text: "Make sure <HeadContent /> is rendered inside <head> in your root document; it is what turns the head() entries into tags. Every Start starter already has it.",
code: `function RootDocument({ children }) {
return (
<html>
<head>
<HeadContent />
</head>
<body>
{children}
<Scripts />
</body>
</html>
);
}`,
caption: "src/routes/__root.tsx",
},
{
text: "Router navigation is tracked automatically; the root route stays mounted across client-side transitions, so the tag loads once and follows every route change.",
},
VERIFY_STEP,
],
},
{
slug: "react",
name: "React (Vite / CRA)",
Expand Down
Loading