📄 tanstack/devtools/latest/docs/framework/react/examples/start

====================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

.vscode
prisma
public
src
- components
- routes
  - __root.tsx
  - about.tsx
  - api.chat.ts
  - api.demo-names.ts
  - demo.start.api-request.tsx
  - demo.start.server-funcs.tsx
  - index.tsx
  - studio.ts
- logo.svg
- plugin.ts
- routeTree.gen.ts
- router.tsx
- styles.css
.cta.json
.gitignore
README.md
package.json
tsconfig.json
vite.config.ts

tsx

import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import Devtools from '../components/devtools'
import Header from '../components/Header'
import appCss from '../styles.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [\
      {\
        charSet: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      {\
        title: 'TanStack Start Starter',\
      },\
    ],
    links: [\
      {\
        rel: 'stylesheet',\
        href: appCss,\
      },\
    ],
  }),

  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  console.log('hello in root document')
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
        {children}

        <Scripts />
        <Devtools />
      </body>
    </html>
  )
}


import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import Devtools from '../components/devtools'
import Header from '../components/Header'
import appCss from '../styles.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [\
      {\
        charSet: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      {\
        title: 'TanStack Start Starter',\
      },\
    ],
    links: [\
      {\
        rel: 'stylesheet',\
        href: appCss,\
      },\
    ],
  }),

  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  console.log('hello in root document')
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
        {children}

        <Scripts />
        <Devtools />
      </body>
    </html>
  )
}

Basic

Custom devtools

Partners Become a Partner