# tanstack-start: Overview URL: https://generaltranslation.com/en-US/docs/tanstack-start/introduction.mdx --- title: Overview description: Overview of General Translation's TanStack Start SDK --- ## Introduction `gt-tanstack-start` is an open-source internationalization (i18n) integration for [TanStack Start](https://tanstack.com/start) applications. It brings the same developer experience as [`gt-next`](/docs/next) — wrap content in ``, and it gets translated — to the TanStack Start framework. Built on top of [`gt-react`](/docs/react), it adds TanStack Start–specific features like isomorphic locale detection and root loader integration. **Experimental:** `gt-tanstack-start` is under active development. APIs may change between minor versions. It is not yet recommended for production use. ## How it works Initialize with [`initializeGT()`](#initialization-with-initializegt) in your root route Load translations in the [root loader](#root-loader) Wrap your app with [``](#the-gtprovider-component) Use [``](#the-t-component) to translate content ## Initialization with `initializeGT` The `initializeGT()` function configures the i18n manager. Call it at the top of your root route file: ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## Root loader Use `getTranslations()` and `getLocale()` in your root route's loader to fetch the right translations for the current request: ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## The `` component The `` provides translation context to all child components. Pass the translations and locale from the loader: ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## The `` component The [``](/docs/react/api/components/t) component translates JSX content. Wrap any elements and they render in the user's language: ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` Import `` from `gt-react`, not from `gt-tanstack-start`. This ensures the `gt` CLI can detect your translatable content when generating translation files. ## Locale selector Add a `` to let users switch languages: ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` --- ## Next steps - Set up your project with the [quickstart guide](/docs/tanstack-start) - Browse the [example app](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) - Learn about [variable components](/docs/react/guides/variables) like ``, ``, and ``