// Generated by scripts/generate-manifest.mjs. Do not edit by hand. import type { WorkerFrameworkManifestModule } from '../../../manifest-types.js' type TemplateRecord = Record type TemplateAddOn = TemplateRecord & { integrations?: Array routes?: Array } type TemplateRenderContext = { [key: string]: any packageManager: any projectName: any typescript: any tailwind: any blank: any js: any jsx: any fileRouter: any codeRouter: any routerOnly: any includeExamples: any addOnEnabled: Record addOnOption: Record addOns: Array integrations: Array routes: Array getPackageManagerAddScript: (...args: Array) => string getPackageManagerRunScript: (...args: Array) => string getPackageManagerExecuteScript: (...args: Array) => string relativePath: (...args: Array) => string integrationImportContent: (...args: Array) => string integrationImportCode: (...args: Array) => string | undefined renderTemplate: (content: string) => string ignoreFile: () => never } type TemplateRenderer = (context: TemplateRenderContext) => string | undefined function __escapeXML(value: unknown) { if (value === undefined || value === null) { return '' } return String(value).replace(/[&<>'"]/g, (character) => { switch (character) { case '&': return '&' case '<': return '<' case '>': return '>' case '"': return '"' case "'": return ''' default: return character } }) } export function getManifestTemplateKey(template: string) { let hash = 0x811c9dc5 for (let i = 0; i < template.length; i++) { hash ^= template.charCodeAt(i) hash = Math.imul(hash, 0x01000193) >>> 0 } return `${hash.toString(16).padStart(8, '0')}:${template.length}` } function __render_0a77947a_2355(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!includeExamples) { ignoreFile(); return; } __append("\nexport default function Footer() {\n const year = new Date().getFullYear()\n\n return (\n
\n
\n

© {year} Your name here. All rights reserved.

\n

Built with TanStack Start

\n
\n
\n \n Follow TanStack on X\n \n \n \n \n \n Go to TanStack GitHub\n \n \n \n \n
\n
\n )\n}\n") return __output } function __render_12c0ab3e_547(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (packageManager !== 'pnpm') { ignoreFile(); return; } __append("allowBuilds:\n esbuild: true\n lightningcss: true\n") if (addOnEnabled.sentry) { __append("'@sentry/cli': true\n") } if (addOnEnabled.cloudflare || addOnEnabled.netlify) { __append("sharp: true\n") } if (addOnEnabled.cloudflare) { __append("workerd: true\n") } if (addOnEnabled.prisma) { __append("'@prisma/engines': true\n prisma: true\n") } if (addOnEnabled.drizzle || (addOnEnabled.prisma && addOnOption.prisma.database === 'sqlite')) { __append("better-sqlite3: true\n") } return __output } function __render_17dececd_578(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!routerOnly) { ignoreFile() } __append("\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n") return __output } function __render_26a5a7ce_906(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } __append("{\n ") if (addOnEnabled.eslint) { __append("\"include\": [\"**/*.ts\", \"**/*.tsx\", \"eslint.config.js\", \"prettier.config.js\", \"vite.config.js\"],\n ") } else { __append("\"include\": [\"**/*.ts\", \"**/*.tsx\"],") } __append("\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"jsx\": \"react-jsx\",\n \"module\": \"ESNext\",\n \"paths\": {\n \"#/*\": [\"./src/*\"],\n \"@/*\": [\"./src/*\"]\n },\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"types\": [\"vite/client\"],\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,") if (addOnEnabled.paraglide) { __append("\n \"allowJs\": true,") } __append("\n \"verbatimModuleSyntax\": ") __append(__escapeXML(addOnEnabled['start'] ? 'false' : 'true')) __append(",\n \"noEmit\": true,\n\n /* Linting */\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true\n }\n}\n") return __output } function __render_2cc85a1c_5032(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!includeExamples) { ignoreFile(); return; } __append("\nimport { Link } from '@tanstack/react-router'\n") for (const integration of integrations.filter((i) => i.type === 'header-user')) { __append("import ") __append(__escapeXML(integration.jsName)) __append(" from '") __append(__escapeXML(relativePath(integration.path))) __append("'\n") } __append("import ThemeToggle from './ThemeToggle'\n\n") const demoRoutes = []; for (const addOn of addOns) { for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) { demoRoutes.push({ url: route.url, name: route.name }); for (const child of route.children || []) { if (child?.url && child?.name) { demoRoutes.push({ url: child.url, name: child.name }); } } } } const userHeaders = integrations.filter((i) => i.type === 'header-user'); __append("\n\nexport default function Header() {\n return (\n
\n \n
\n )\n}\n") return __output } function __render_3842e959_4368(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (blank) { __append("\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({ component: Home })\n\nfunction Home() {\n return (\n
\n

Welcome to TanStack Start

\n

\n Edit src/routes/index.tsx to get started.\n

\n
\n )\n}\n") } else if (!includeExamples) { __append("\nimport { createFileRoute } from \"@tanstack/react-router\";\n\nexport const Route = createFileRoute(\"/\")({ component: Home });\n\nfunction Home() {\n return (\n
\n

Welcome to TanStack Start

\n

\n Edit src/routes/index.tsx to get started.\n

\n
\n );\n}\n") } else { __append("\nimport { createFileRoute } from \"@tanstack/react-router\";\n\nexport const Route = createFileRoute(\"/\")({ component: App });\n\nfunction App() {\n return (\n
\n
\n
\n
\n

TanStack Start Base Template

\n

\n Start simple, ship quickly.\n

\n

\n This base starter intentionally keeps things light: two routes, clean structure,\n and the essentials you need to build from scratch.\n

\n
\n \n About This Starter\n \n \n Router Guide\n \n
\n
\n\n
\n {[\n ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],\n ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],\n ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],\n ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],\n ].map(([title, desc], index) => (\n \n

{title}

\n

{desc}

\n \n ))}\n
\n\n
\n

Quick Start

\n
    \n
  • \n Edit src/routes/index.tsx to customize the home page.\n
    • \n
  • \n Update src/components/Header.tsx and src/components/Footer.tsx{' '}\n for brand links.\n
    • \n
  • \n Add routes in src/routes and tweak visual tokens in src/styles.css.\n
    • \n
\n
\n
\n );\n}\n") } __append("\n") return __output } function __render_6efd6a86_1382(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } __append("import { createRouter as createTanStackRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n") if (addOnEnabled['tanstack-query']) { if (addOnEnabled.tRPC) { __append("\nimport type { ReactNode } from 'react'") } __append("\nimport { setupRouterSsrQueryIntegration } from \"@tanstack/react-router-ssr-query\";\nimport ") if (addOnEnabled.tRPC) { __append("TanstackQueryProvider, ") } __append("{ getContext } from './integrations/tanstack-query/root-provider'\n") } __append("\n\nexport function getRouter() {\n ") if (addOnEnabled['tanstack-query']) { __append("\n const context = getContext();\n ") } __append("\n \n const router = createTanStackRouter({\n routeTree,") if (addOnEnabled['tanstack-query']) { __append("\n context,") } else if (addOnEnabled['apollo-client']) { __append("\n context: {} as any,\n") } __append("\n scrollRestoration: true,\n defaultPreload: 'intent',\n defaultPreloadStaleTime: 0,\n ") if (addOnEnabled.tRPC) { __append("\n Wrap: (props: { children: ReactNode }) => {\n return (\n \n {props.children}\n \n );\n },\n ") } __append("\n })\n\n") if (addOnEnabled['tanstack-query']) { __append("\n setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })\n") } __append("\n\n return router\n}\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n") return __output } function __render_7094245c_344(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!routerOnly) { ignoreFile() } __append("\n\n\n \n \n \n ") __append(__escapeXML(projectName)) __append("\n \n \n
\n \n \n\n") return __output } function __render_799a9561_1681(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } __append("import { defineConfig } from 'vite'\n") const showDevtools = !blank || integrations.some((integration) => integration.type === 'devtools') if (showDevtools) { __append("import { devtools } from '@tanstack/devtools-vite'\n") } if (addOnEnabled.paraglide) { __append("import { paraglideVitePlugin } from \"@inlang/paraglide-js\"\n") } if (routerOnly) { __append("\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n") } else { __append("\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite';\n") } __append("\n") if (addOnEnabled.compiler) { __append("import viteReact, { reactCompilerPreset } from '@vitejs/plugin-react'\nimport babel from '@rolldown/plugin-babel'\n") } else { __append("import viteReact from '@vitejs/plugin-react'\n") } if (tailwind) { __append("import tailwindcss from \"@tailwindcss/vite\"\n") } for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { __append(integrationImportContent(integration)) __append("\n") } __append("\n\nconst config = defineConfig({\n resolve: { tsconfigPaths: true },\n plugins: [") if (showDevtools) { __append("devtools(), ") } if (addOnEnabled.paraglide) { __append("paraglideVitePlugin({\n project: './project.inlang',\n outdir: './src/paraglide',\n strategy: ['url', \"baseLocale\"],\n }), ") } for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { __append(integrationImportCode(integration)) __append(",") } __append("\n ") if (tailwind) { __append("tailwindcss(),") } __append("\n ") if (routerOnly) { __append("tanstackRouter({ target: 'react', autoCodeSplitting: true }),") } else { __append("tanstackStart(),") } __append("\n viteReact(),") if (addOnEnabled.compiler) { __append("\n babel({ presets: [reactCompilerPreset()] }),") } __append("\n ],\n})\n\nexport default config\n") return __output } function __render_9900fb69_731(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (routerOnly || (!addOnEnabled.clerk && !addOnEnabled.workos)) { ignoreFile(); return; } __append("\nimport { createCsrfMiddleware, createStart } from '@tanstack/react-start'\n") if (addOnEnabled.clerk) { __append("\nimport { clerkMiddleware } from '@clerk/tanstack-react-start/server'\n") } __append("\n") if (addOnEnabled.workos) { __append("\nimport { authkitMiddleware } from '@workos/authkit-tanstack-react-start'\n") } __append("\n\nconst csrfMiddleware = createCsrfMiddleware({\n filter: (context) => context.handlerType === 'serverFn',\n})\n\nexport const startInstance = createStart(() => ({\n requestMiddleware: [\n csrfMiddleware,\n ") if (addOnEnabled.clerk) { __append("clerkMiddleware(),") } __append("\n ") if (addOnEnabled.workos) { __append("authkitMiddleware(),") } __append("\n ],\n}))\n") return __output } function __render_abf34a43_2309(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!includeExamples) { ignoreFile(); return; } __append("\nimport { useEffect, useState } from 'react'\n\ntype ThemeMode = 'light' | 'dark' | 'auto'\n\nfunction getInitialMode(): ThemeMode {\n if (typeof window === 'undefined') {\n return 'auto'\n }\n\n const stored = window.localStorage.getItem('theme')\n if (stored === 'light' || stored === 'dark' || stored === 'auto') {\n return stored\n }\n\n return 'auto'\n}\n\nfunction applyThemeMode(mode: ThemeMode) {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode\n\n document.documentElement.classList.remove('light', 'dark')\n document.documentElement.classList.add(resolved)\n\n if (mode === 'auto') {\n document.documentElement.removeAttribute('data-theme')\n } else {\n document.documentElement.setAttribute('data-theme', mode)\n }\n\n document.documentElement.style.colorScheme = resolved\n}\n\nexport default function ThemeToggle() {\n const [mode, setMode] = useState('auto')\n\n useEffect(() => {\n const initialMode = getInitialMode()\n setMode(initialMode)\n applyThemeMode(initialMode)\n }, [])\n\n useEffect(() => {\n if (mode !== 'auto') {\n return\n }\n\n const media = window.matchMedia('(prefers-color-scheme: dark)')\n const onChange = () => applyThemeMode('auto')\n\n media.addEventListener('change', onChange)\n return () => {\n media.removeEventListener('change', onChange)\n }\n }, [mode])\n\n function toggleMode() {\n const nextMode: ThemeMode =\n mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'\n setMode(nextMode)\n applyThemeMode(nextMode)\n window.localStorage.setItem('theme', nextMode)\n }\n\n const label =\n mode === 'auto'\n ? 'Theme mode: auto (system). Click to switch to light mode.'\n : `Theme mode: ${mode}. Click to switch mode.`\n\n return (\n \n {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}\n \n )\n}\n") return __output } function __render_b1a58b51_856(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (!includeExamples) { ignoreFile(); return; } __append("\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/about')({\n component: About,\n})\n\nfunction About() {\n return (\n
\n
\n

About

\n

\n A small starter with room to grow.\n

\n

\n TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.\n Use this as a clean foundation, then layer in your own routes, styling, and add-ons.\n

\n
\n
\n )\n}\n") return __output } function __render_c7ddd624_10891(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (blank) { __append("\n") if (tailwind) { __append("@import \"tailwindcss\";\n\n") } __append("\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n}\n\nmain {\n width: min(42rem, calc(100% - 2rem));\n margin: 4rem auto;\n}\n") } else if (!includeExamples) { __append("\n@import \"tailwindcss\";\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#app {\n min-height: 100%;\n}\n\nbody {\n margin: 0;\n}\n") } else { __append("\n@import url(\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap\");\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n\n@theme {\n --font-sans: \"Manrope\", ui-sans-serif, system-ui, sans-serif;\n}\n\n:root {\n --sea-ink: #173a40;\n --sea-ink-soft: #416166;\n --lagoon: #4fb8b2;\n --lagoon-deep: #328f97;\n --palm: #2f6a4a;\n --sand: #e7f0e8;\n --foam: #f3faf5;\n --surface: rgba(255, 255, 255, 0.74);\n --surface-strong: rgba(255, 255, 255, 0.9);\n --line: rgba(23, 58, 64, 0.14);\n --inset-glint: rgba(255, 255, 255, 0.82);\n --kicker: rgba(47, 106, 74, 0.9);\n --bg-base: #e7f3ec;\n --header-bg: rgba(251, 255, 248, 0.84);\n --chip-bg: rgba(255, 255, 255, 0.8);\n --chip-line: rgba(47, 106, 74, 0.18);\n --link-bg-hover: rgba(255, 255, 255, 0.9);\n --hero-a: rgba(79, 184, 178, 0.36);\n --hero-b: rgba(47, 106, 74, 0.2);\n}\n\n:root[data-theme=\"dark\"] {\n --sea-ink: #d7ece8;\n --sea-ink-soft: #afcdc8;\n --lagoon: #60d7cf;\n --lagoon-deep: #8de5db;\n --palm: #6ec89a;\n --sand: #0f1a1e;\n --foam: #101d22;\n --surface: rgba(16, 30, 34, 0.8);\n --surface-strong: rgba(15, 27, 31, 0.92);\n --line: rgba(141, 229, 219, 0.18);\n --inset-glint: rgba(194, 247, 238, 0.14);\n --kicker: #b8efe5;\n --bg-base: #0a1418;\n --header-bg: rgba(10, 20, 24, 0.8);\n --chip-bg: rgba(13, 28, 32, 0.9);\n --chip-line: rgba(141, 229, 219, 0.24);\n --link-bg-hover: rgba(24, 44, 49, 0.8);\n --hero-a: rgba(96, 215, 207, 0.18);\n --hero-b: rgba(110, 200, 154, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --sea-ink: #d7ece8;\n --sea-ink-soft: #afcdc8;\n --lagoon: #60d7cf;\n --lagoon-deep: #8de5db;\n --palm: #6ec89a;\n --sand: #0f1a1e;\n --foam: #101d22;\n --surface: rgba(16, 30, 34, 0.8);\n --surface-strong: rgba(15, 27, 31, 0.92);\n --line: rgba(141, 229, 219, 0.18);\n --inset-glint: rgba(194, 247, 238, 0.14);\n --kicker: #b8efe5;\n --bg-base: #0a1418;\n --header-bg: rgba(10, 20, 24, 0.8);\n --chip-bg: rgba(13, 28, 32, 0.9);\n --chip-line: rgba(141, 229, 219, 0.24);\n --link-bg-hover: rgba(24, 44, 49, 0.8);\n --hero-a: rgba(96, 215, 207, 0.18);\n --hero-b: rgba(110, 200, 154, 0.12);\n }\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#app {\n min-height: 100%;\n}\n\nbody {\n margin: 0;\n color: var(--sea-ink);\n font-family: var(--font-sans);\n background-color: var(--bg-base);\n background:\n radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),\n radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),\n radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),\n linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: -1;\n opacity: 0.28;\n background:\n radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%),\n radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),\n radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);\n}\n\nbody::after {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: -1;\n opacity: 0.14;\n background-image:\n linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);\n background-size: 28px 28px;\n mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);\n}\n\na {\n color: var(--lagoon-deep);\n text-decoration-color: rgba(50, 143, 151, 0.4);\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n}\n\na:hover {\n color: #246f76;\n}\n\ncode {\n font-size: 0.9em;\n border: 1px solid var(--line);\n background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);\n border-radius: 7px;\n padding: 2px 7px;\n}\n\npre code {\n border: 0;\n background: transparent;\n padding: 0;\n border-radius: 0;\n font-size: inherit;\n color: inherit;\n}\n\n.page-wrap {\n width: min(1080px, calc(100% - 2rem));\n margin-inline: auto;\n}\n\n.display-title {\n font-family: \"Fraunces\", Georgia, serif;\n}\n\n.island-shell {\n border: 1px solid var(--line);\n background: linear-gradient(165deg, var(--surface-strong), var(--surface));\n box-shadow:\n 0 1px 0 var(--inset-glint) inset,\n 0 22px 44px rgba(30, 90, 72, 0.1),\n 0 6px 18px rgba(23, 58, 64, 0.08);\n backdrop-filter: blur(4px);\n}\n\n.feature-card {\n background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));\n box-shadow:\n 0 1px 0 var(--inset-glint) inset,\n 0 18px 34px rgba(30, 90, 72, 0.1),\n 0 4px 14px rgba(23, 58, 64, 0.06);\n}\n\n.feature-card:hover {\n transform: translateY(-2px);\n border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));\n}\n\n.demo-page {\n width: min(1080px, calc(100% - 2rem));\n margin-inline: auto;\n padding-block: clamp(2.25rem, 6vw, 4.5rem);\n color: var(--sea-ink);\n}\n\n.demo-page-wide {\n width: min(1280px, calc(100% - 2rem));\n}\n\n.demo-center {\n min-height: calc(100vh - 13rem);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.demo-panel,\n.demo-card {\n border: 1px solid var(--line);\n background: linear-gradient(165deg, var(--surface-strong), var(--surface));\n box-shadow:\n 0 1px 0 var(--inset-glint) inset,\n 0 18px 34px rgba(30, 90, 72, 0.1),\n 0 4px 14px rgba(23, 58, 64, 0.06);\n backdrop-filter: blur(4px);\n}\n\n.demo-panel {\n border-radius: 1.25rem;\n padding: clamp(1.25rem, 4vw, 2rem);\n}\n\n.demo-card {\n border-radius: 1rem;\n padding: 1rem;\n}\n\n.demo-title {\n margin: 0;\n color: var(--sea-ink);\n font-size: clamp(1.75rem, 4vw, 2.75rem);\n line-height: 1.05;\n font-weight: 800;\n letter-spacing: 0;\n}\n\n.demo-section-title {\n margin: 0;\n color: var(--sea-ink);\n font-size: 1rem;\n font-weight: 700;\n}\n\n.demo-muted {\n color: var(--sea-ink-soft);\n}\n\n.demo-input,\n.demo-select,\n.demo-textarea {\n width: 100%;\n border: 1px solid var(--line);\n border-radius: 0.75rem;\n background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);\n color: var(--sea-ink);\n outline: none;\n transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;\n}\n\n.demo-input,\n.demo-select {\n padding: 0.7rem 0.9rem;\n}\n\n.demo-input-fit {\n width: auto;\n}\n\n.demo-textarea {\n min-height: 7rem;\n padding: 0.8rem 0.9rem;\n resize: vertical;\n}\n\n.demo-input:focus,\n.demo-select:focus,\n.demo-textarea:focus {\n border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);\n}\n\n.demo-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));\n border-radius: 0.85rem;\n background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));\n color: var(--sea-ink);\n padding: 0.72rem 1rem;\n font-size: 0.9rem;\n font-weight: 700;\n line-height: 1;\n cursor: pointer;\n}\n\n.demo-button:hover {\n transform: translateY(-1px);\n background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));\n}\n\n.demo-button:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n transform: none;\n}\n\n.demo-button-secondary {\n border-color: var(--line);\n background: color-mix(in oklab, var(--surface-strong) 74%, transparent);\n color: var(--sea-ink-soft);\n}\n\n.demo-button-danger {\n border-color: rgba(196, 71, 71, 0.28);\n background: rgba(196, 71, 71, 0.1);\n color: #9f3030;\n}\n\n.demo-list-item {\n border: 1px solid var(--line);\n border-radius: 0.9rem;\n background: color-mix(in oklab, var(--chip-bg) 82%, transparent);\n padding: 0.9rem 1rem;\n}\n\n.demo-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n border: 1px solid var(--chip-line);\n border-radius: 999px;\n background: var(--chip-bg);\n color: var(--sea-ink-soft);\n padding: 0.35rem 0.65rem;\n font-size: 0.75rem;\n font-weight: 700;\n}\n\n.demo-alert {\n border: 1px solid rgba(193, 126, 42, 0.3);\n border-radius: 1rem;\n background: rgba(193, 126, 42, 0.1);\n color: var(--sea-ink);\n padding: 1rem;\n}\n\n.demo-alert-danger {\n border-color: rgba(196, 71, 71, 0.3);\n background: rgba(196, 71, 71, 0.1);\n}\n\n.demo-code-block {\n border: 1px solid var(--line);\n border-radius: 1rem;\n background: color-mix(in oklab, var(--chip-bg) 88%, transparent);\n color: var(--sea-ink);\n padding: 1rem;\n}\n\n.demo-table-shell {\n overflow-x: auto;\n border: 1px solid var(--line);\n border-radius: 1rem;\n background: color-mix(in oklab, var(--surface-strong) 78%, transparent);\n}\n\n.demo-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--sea-ink);\n}\n\n.demo-table th,\n.demo-table td {\n border-bottom: 1px solid var(--line);\n padding: 0.75rem 1rem;\n text-align: left;\n}\n\n.demo-table th {\n background: color-mix(in oklab, var(--chip-bg) 88%, transparent);\n color: var(--sea-ink);\n font-weight: 700;\n}\n\n.demo-table tr:hover td {\n background: color-mix(in oklab, var(--lagoon) 8%, transparent);\n}\n\nbutton,\n.island-shell,\na {\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,\n transform 180ms ease;\n}\n\n.island-kicker {\n letter-spacing: 0.16em;\n text-transform: uppercase;\n font-weight: 700;\n font-size: 0.69rem;\n color: var(--kicker);\n}\n\n.nav-link {\n position: relative;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: var(--sea-ink-soft);\n}\n\n.nav-link::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: -6px;\n width: 100%;\n height: 2px;\n transform: scaleX(0);\n transform-origin: left;\n background: linear-gradient(90deg, var(--lagoon), #7ed3bf);\n transition: transform 170ms ease;\n}\n\n.nav-link:hover,\n.nav-link.is-active {\n color: var(--sea-ink);\n}\n\n.nav-link:hover::after,\n.nav-link.is-active::after {\n transform: scaleX(1);\n}\n\n@media (max-width: 640px) {\n .nav-link::after {\n bottom: -4px;\n }\n}\n\n.site-footer {\n border-top: 1px solid var(--line);\n background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);\n}\n\n.rise-in {\n animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n@keyframes rise-in {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n") } __append("\n") return __output } function __render_d323788b_6508(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (blank) { __append("# ") __append(__escapeXML(projectName)) __append("\n\nA minimal TanStack Start app with one route and ") __append(__escapeXML(tailwind ? 'Tailwind CSS' : 'plain CSS')) __append(".\n\n```bash\n") __append(__escapeXML(packageManager)) __append(" install\n") __append(__escapeXML(getPackageManagerRunScript('dev'))) __append("\n```\n\nEdit `src/routes/index.tsx` to get started. Add route files under\n`src/routes`; TanStack Router updates `src/routeTree.gen.ts` for you.\n\nBuild the production app with:\n\n```bash\n") __append(__escapeXML(getPackageManagerRunScript('build'))) __append("\n```\n") for(const addon of addOns.filter(addon => addon.readme)) { __append("\n") __append(addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme) __append("\n") } __append("\n") } else { __append("Welcome to your new TanStack Start app!\n\n# Getting Started\n\nTo run this application:\n\n```bash\n") __append(__escapeXML(packageManager)) __append(" install\n") __append(__escapeXML(getPackageManagerRunScript('dev'))) __append("\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\n") __append(__escapeXML(getPackageManagerRunScript('build'))) __append("\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n### Removing Tailwind CSS\n\nIf you prefer not to use Tailwind CSS:\n\n1. Remove the demo pages in `src/routes/demo/`\n2. Replace the Tailwind import in `src/styles.css` with your own styles\n3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`\n4. Remove `@tailwindcss/vite` and `tailwindcss` from `package.json`\n") if (addOnEnabled.biome || addOnEnabled.eslint) { __append("\n## Linting & Formatting\n") if (addOnEnabled.biome) { __append("\nThis project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:\n") } __append("\n") if (addOnEnabled.eslint) { __append("\nThis project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:\n") } __append("\n```bash\n") __append(__escapeXML(getPackageManagerRunScript('lint'))) __append("\n") __append(__escapeXML(getPackageManagerRunScript('format'))) __append("\n") __append(__escapeXML(getPackageManagerRunScript('check'))) __append("\n```\n") } __append("\n") for(const addon of addOns.filter(addon => addon.readme)) { __append("\n") __append(addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme) __append("\n") } __append("\n\n## Routing\n\nThis project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\nAbout\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n head: () => ({\n meta: [\n { charSet: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { title: 'My App' },\n ],\n }),\n shellComponent: ({ children }) => (\n \n \n \n \n \n
\n \n
\n {children}\n \n \n \n ),\n})\n```\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n## Server Functions\n\nTanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.\n\n```tsx\nimport { createServerFn } from '@tanstack/react-start'\n\nconst getServerTime = createServerFn({\n method: 'GET',\n}).handler(async () => {\n return new Date().toISOString()\n})\n\n// Use in a component\nfunction MyComponent() {\n const [time, setTime] = useState('')\n \n useEffect(() => {\n getServerTime().then(setTime)\n }, [])\n \n return
Server time: {time}
\n}\n```\n\n## API Routes\n\nYou can create API routes by using the `server` property in your route definitions:\n\n```tsx\nimport { createFileRoute } from '@tanstack/react-router'\nimport { json } from '@tanstack/react-start'\n\nexport const Route = createFileRoute('/api/hello')({\n server: {\n handlers: {\n GET: () => json({ message: 'Hello, World!' }),\n },\n },\n})\n```\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/people')({\n loader: async () => {\n const response = await fetch('https://swapi.dev/api/people')\n return response.json()\n },\n component: PeopleComponent,\n})\n\nfunction PeopleComponent() {\n const data = Route.useLoaderData()\n return (\n
    \n {data.results.map((person) => (\n
  • {person.name}
    • \n ))}\n
\n )\n}\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n") if (includeExamples) { __append("\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n") } __append("\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n\nFor TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).\n") } return __output } function __render_de796a29_811(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } __append("{\n \"files.watcherExclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"search.exclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"files.readonlyInclude\": {\n \"**/routeTree.gen.ts\": true\n }") if (addOnEnabled.biome) { __append(",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[javascriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[jsonc]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[css]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"editor.codeActionsOnSave\": {\n \"source.organizeImports.biome\": \"explicit\"\n }") } __append("\n}\n") return __output } function __render_f4bbbbc6_8672(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } const showDevtools = !blank || integrations.some((integration) => integration.type === 'devtools') if (routerOnly) { __append("\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\n") if (showDevtools) { __append("\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n") } __append("\n\nimport '../styles.css'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n \n ") if (showDevtools) { __append(",\n },\n ]}\n />") } __append("\n \n )\n}\n") } else if (!includeExamples || blank) { __append("\n") let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; __append("\nimport {\n HeadContent, Scripts, ") if (hasContext) { __append("createRootRouteWithContext") } else { __append("createRootRoute") } __append(" } from '@tanstack/react-router'\n") if (showDevtools) { __append("import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n") } __append("\n") for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { __append("\nimport ") __append(__escapeXML(integration.jsName)) __append(" from '") __append(__escapeXML(relativePath(integration.path, true))) __append("'\n") } if (addOnEnabled.paraglide) { __append("\nimport { getLocale } from '#/paraglide/runtime'\n") } __append("\nimport appCss from '../styles.css?url'\n") if (addOnEnabled["apollo-client"]) { __append("\nimport type { ApolloClientIntegration } from \"@apollo/client-integration-tanstack-start\";\n") } __append("\n") if (addOnEnabled["tanstack-query"]) { __append("\nimport type { QueryClient } from '@tanstack/react-query'\n") if (addOnEnabled.tRPC) { __append("\nimport type { TRPCRouter } from '#/integrations/trpc/router'\nimport type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'\n") } __append("\n") } __append("\n") if (hasContext) { __append("\ninterface MyRouterContext ") if (addOnEnabled["apollo-client"]) { __append(" extends ApolloClientIntegration.RouterContext ") } __append("{\n") if (addOnEnabled["tanstack-query"]) { __append("\n queryClient: QueryClient\n ") if (addOnEnabled.tRPC) { __append("\n trpc: TRPCOptionsProxy\n ") } __append("\n") } __append("\n}") } __append("\n\nexport const Route = ") if (hasContext) { __append("createRootRouteWithContext()") } else { __append("createRootRoute") } __append("({\n") if (addOnEnabled.paraglide) { __append("\n beforeLoad: async () => {\n // Other redirect strategies are possible; see\n // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect\n if (typeof document !== 'undefined') {\n document.documentElement.setAttribute('lang', getLocale())\n }\n },\n") } __append("\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n shellComponent: RootDocument\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n ") if (addOnEnabled.paraglide) { __append("") } else { __append("") } __append("\n \n \n \n \n ") for(const integration of integrations.filter(i => i.type === 'provider')) { __append("<") __append(__escapeXML(integration.jsName)) __append(">\n ") } __append("{children}\n ") if (showDevtools) { __append(",\n },\n ") for(const integration of integrations.filter(i => i.type === 'devtools')) { __append(__escapeXML(integration.jsName)) __append(",") } __append("\n ]}\n />") } __append("\n ") for(const integration of integrations.filter(i => i.type === 'layout')) { __append("<") __append(__escapeXML(integration.jsName)) __append(" />\n ") } for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { __append("\n ") } __append("\n \n \n )\n}\n") } else { __append("\n") let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; __append("\nimport {\n HeadContent, Scripts, ") if (hasContext) { __append("createRootRouteWithContext") } else { __append("createRootRoute") } __append(" } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport Footer from '../components/Footer'\nimport Header from '../components/Header'\n") for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { __append("\nimport ") __append(__escapeXML(integration.jsName)) __append(" from '") __append(__escapeXML(relativePath(integration.path, true))) __append("'\n") } if (addOnEnabled.paraglide) { __append("\nimport { getLocale } from '#/paraglide/runtime'\n") } __append("\nimport appCss from '../styles.css?url'\n") if (addOnEnabled["apollo-client"]) { __append("\nimport type { ApolloClientIntegration } from \"@apollo/client-integration-tanstack-start\";\n") } __append("\n") if (addOnEnabled["tanstack-query"]) { __append("\nimport type { QueryClient } from '@tanstack/react-query'\n") if (addOnEnabled.tRPC) { __append("\nimport type { TRPCRouter } from '#/integrations/trpc/router'\nimport type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'\n") } __append("\n") } __append("\n") if (hasContext) { __append("\ninterface MyRouterContext ") if (addOnEnabled["apollo-client"]) { __append(" extends ApolloClientIntegration.RouterContext ") } __append("{\n") if (addOnEnabled["tanstack-query"]) { __append("\n queryClient: QueryClient\n ") if (addOnEnabled.tRPC) { __append("\n trpc: TRPCOptionsProxy\n ") } __append("\n") } __append("\n}") } __append("\n\nconst THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`\n\nexport const Route = ") if (hasContext) { __append("createRootRouteWithContext()") } else { __append("createRootRoute") } __append("({\n") if (addOnEnabled.paraglide) { __append("\n beforeLoad: async () => {\n // Other redirect strategies are possible; see\n // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect\n if (typeof document !== 'undefined') {\n document.documentElement.setAttribute('lang', getLocale())\n }\n },\n") } __append("\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n shellComponent: RootDocument\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n ") if (addOnEnabled.paraglide) { __append("") } else { __append("") } __append("\n \n \n \n\n", "package.json": "{\n \"name\": \"\",\n \"private\": true,\n \"type\": \"module\",\n \"imports\": {\n \"#/*\": \"./src/*\"\n },\n \"scripts\": {\n \"dev\": \"vite dev --port 3000\",\n \"generate-routes\": \"tsr generate\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"latest\",\n \"@tanstack/react-start\": \"latest\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n },\n \"pnpm\": {\n \"onlyBuiltDependencies\": [\n \"esbuild\",\n \"lightningcss\"\n ]\n }\n}\n", "pnpm-workspace.yaml.ejs": "<% if (packageManager !== 'pnpm') { ignoreFile(); return; } -%>\nallowBuilds:\n esbuild: true\n lightningcss: true\n<% if (addOnEnabled.sentry) { -%>\n '@sentry/cli': true\n<% } -%>\n<% if (addOnEnabled.cloudflare || addOnEnabled.netlify) { -%>\n sharp: true\n<% } -%>\n<% if (addOnEnabled.cloudflare) { -%>\n workerd: true\n<% } -%>\n<% if (addOnEnabled.prisma) { -%>\n '@prisma/engines': true\n prisma: true\n<% } -%>\n<% if (addOnEnabled.drizzle || (addOnEnabled.prisma && addOnOption.prisma.database === 'sqlite')) { -%>\n better-sqlite3: true\n<% } -%>\n", "src/components/Footer.tsx.ejs": "<% if (!includeExamples) { ignoreFile(); return; } %>\nexport default function Footer() {\n const year = new Date().getFullYear()\n\n return (\n
\n
\n

© {year} Your name here. All rights reserved.

\n

Built with TanStack Start

\n
\n
\n \n Follow TanStack on X\n \n \n \n \n \n Go to TanStack GitHub\n \n \n \n \n
\n
\n )\n}\n", "src/components/Header.tsx.ejs": "<% if (!includeExamples) { ignoreFile(); return; } %>\nimport { Link } from '@tanstack/react-router'\n<% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'\n<% } %>import ThemeToggle from './ThemeToggle'\n\n<%\nconst demoRoutes = [];\nfor (const addOn of addOns) {\n for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {\n demoRoutes.push({ url: route.url, name: route.name });\n for (const child of route.children || []) {\n if (child?.url && child?.name) {\n demoRoutes.push({ url: child.url, name: child.name });\n }\n }\n }\n}\nconst userHeaders = integrations.filter((i) => i.type === 'header-user');\n%>\n\nexport default function Header() {\n return (\n
\n \n
\n )\n}\n", "src/components/ThemeToggle.tsx.ejs": "<% if (!includeExamples) { ignoreFile(); return; } %>\nimport { useEffect, useState } from 'react'\n\ntype ThemeMode = 'light' | 'dark' | 'auto'\n\nfunction getInitialMode(): ThemeMode {\n if (typeof window === 'undefined') {\n return 'auto'\n }\n\n const stored = window.localStorage.getItem('theme')\n if (stored === 'light' || stored === 'dark' || stored === 'auto') {\n return stored\n }\n\n return 'auto'\n}\n\nfunction applyThemeMode(mode: ThemeMode) {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode\n\n document.documentElement.classList.remove('light', 'dark')\n document.documentElement.classList.add(resolved)\n\n if (mode === 'auto') {\n document.documentElement.removeAttribute('data-theme')\n } else {\n document.documentElement.setAttribute('data-theme', mode)\n }\n\n document.documentElement.style.colorScheme = resolved\n}\n\nexport default function ThemeToggle() {\n const [mode, setMode] = useState('auto')\n\n useEffect(() => {\n const initialMode = getInitialMode()\n setMode(initialMode)\n applyThemeMode(initialMode)\n }, [])\n\n useEffect(() => {\n if (mode !== 'auto') {\n return\n }\n\n const media = window.matchMedia('(prefers-color-scheme: dark)')\n const onChange = () => applyThemeMode('auto')\n\n media.addEventListener('change', onChange)\n return () => {\n media.removeEventListener('change', onChange)\n }\n }, [mode])\n\n function toggleMode() {\n const nextMode: ThemeMode =\n mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'\n setMode(nextMode)\n applyThemeMode(nextMode)\n window.localStorage.setItem('theme', nextMode)\n }\n\n const label =\n mode === 'auto'\n ? 'Theme mode: auto (system). Click to switch to light mode.'\n : `Theme mode: ${mode}. Click to switch mode.`\n\n return (\n \n {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}\n \n )\n}\n", "src/main.tsx.ejs": "<% if (!routerOnly) { ignoreFile() } %>\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n", "src/router.tsx.ejs": "import { createRouter as createTanStackRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n<% if (addOnEnabled['tanstack-query']) { %><% if (addOnEnabled.tRPC) { %>\nimport type { ReactNode } from 'react'<% } %>\nimport { setupRouterSsrQueryIntegration } from \"@tanstack/react-router-ssr-query\";\nimport <% if (addOnEnabled.tRPC) { %>TanstackQueryProvider, <% } %>{ getContext } from './integrations/tanstack-query/root-provider'\n<% } %>\n\nexport function getRouter() {\n <% if (addOnEnabled['tanstack-query']) { %>\n const context = getContext();\n <% } %>\n \n const router = createTanStackRouter({\n routeTree,<% if (addOnEnabled['tanstack-query']) { %>\n context,<% } else if (addOnEnabled['apollo-client']) { %>\n context: {} as any,\n<% } %>\n scrollRestoration: true,\n defaultPreload: 'intent',\n defaultPreloadStaleTime: 0,\n <% if (addOnEnabled.tRPC) { %>\n Wrap: (props: { children: ReactNode }) => {\n return (\n \n {props.children}\n \n );\n },\n <% } %>\n })\n\n<% if (addOnEnabled['tanstack-query']) { %>\n setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })\n<% } %>\n\n return router\n}\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n", "src/routes/__root.tsx.ejs": "<% const showDevtools = !blank || integrations.some((integration) => integration.type === 'devtools') -%>\n<% if (routerOnly) { %>\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\n<% if (showDevtools) { %>\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n<% } %>\n\nimport '../styles.css'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n \n <% if (showDevtools) { %>,\n },\n ]}\n /><% } %>\n \n )\n}\n<% } else if (!includeExamples || blank) { %>\n<% let hasContext = addOnEnabled[\"apollo-client\"] || addOnEnabled[\"tanstack-query\"]; %>\nimport {\n HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'\n<% if (showDevtools) { %>import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n<% } %>\n<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>\nimport <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'\n<% } %><% if (addOnEnabled.paraglide) { %>\nimport { getLocale } from '#/paraglide/runtime'\n<% } %>\nimport appCss from '../styles.css?url'\n<% if (addOnEnabled[\"apollo-client\"]) { %>\nimport type { ApolloClientIntegration } from \"@apollo/client-integration-tanstack-start\";\n<% } %>\n<% if (addOnEnabled[\"tanstack-query\"]) { %>\nimport type { QueryClient } from '@tanstack/react-query'\n<% if (addOnEnabled.tRPC) { %>\nimport type { TRPCRouter } from '#/integrations/trpc/router'\nimport type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'\n<% } %>\n<% } %>\n<% if (hasContext) { %>\ninterface MyRouterContext <% if (addOnEnabled[\"apollo-client\"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{\n<% if (addOnEnabled[\"tanstack-query\"]) { %>\n queryClient: QueryClient\n <% if (addOnEnabled.tRPC) { %>\n trpc: TRPCOptionsProxy\n <% } %>\n<% } %>\n}<% } %>\n\nexport const Route = <% if (hasContext) { %>createRootRouteWithContext()<% } else { %>createRootRoute<% } %>({\n<% if (addOnEnabled.paraglide) { %>\n beforeLoad: async () => {\n // Other redirect strategies are possible; see\n // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect\n if (typeof document !== 'undefined') {\n document.documentElement.setAttribute('lang', getLocale())\n }\n },\n<% } %>\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n shellComponent: RootDocument\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n <% if (addOnEnabled.paraglide) { %><% } else { %><% } %>\n \n \n \n \n <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>\n <% } %>{children}\n <% if (showDevtools) { %>,\n },\n <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>\n ]}\n /><% } %>\n <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />\n <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>>\n <% } %>\n \n \n )\n}\n<% } else { %>\n<% let hasContext = addOnEnabled[\"apollo-client\"] || addOnEnabled[\"tanstack-query\"]; %>\nimport {\n HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport Footer from '../components/Footer'\nimport Header from '../components/Header'\n<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>\nimport <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'\n<% } %><% if (addOnEnabled.paraglide) { %>\nimport { getLocale } from '#/paraglide/runtime'\n<% } %>\nimport appCss from '../styles.css?url'\n<% if (addOnEnabled[\"apollo-client\"]) { %>\nimport type { ApolloClientIntegration } from \"@apollo/client-integration-tanstack-start\";\n<% } %>\n<% if (addOnEnabled[\"tanstack-query\"]) { %>\nimport type { QueryClient } from '@tanstack/react-query'\n<% if (addOnEnabled.tRPC) { %>\nimport type { TRPCRouter } from '#/integrations/trpc/router'\nimport type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'\n<% } %>\n<% } %>\n<% if (hasContext) { %>\ninterface MyRouterContext <% if (addOnEnabled[\"apollo-client\"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{\n<% if (addOnEnabled[\"tanstack-query\"]) { %>\n queryClient: QueryClient\n <% if (addOnEnabled.tRPC) { %>\n trpc: TRPCOptionsProxy\n <% } %>\n<% } %>\n}<% } %>\n\nconst THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`\n\nexport const Route = <% if (hasContext) { %>createRootRouteWithContext()<% } else { %>createRootRoute<% } %>({\n<% if (addOnEnabled.paraglide) { %>\n beforeLoad: async () => {\n // Other redirect strategies are possible; see\n // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect\n if (typeof document !== 'undefined') {\n document.documentElement.setAttribute('lang', getLocale())\n }\n },\n<% } %>\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n shellComponent: RootDocument\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n <% if (addOnEnabled.paraglide) { %><% } else { %><% } %>\n \n