# Install Paraglide and the Vite plugin
npm install @inlang/paraglide-js @inlang/paraglide-vite

// vite.config.ts
import { paraglide } from "@inlang/paraglide-vite"
import { defineConfig } from "vite"

export default defineConfig({
 plugins: [
 paraglide({
 project: "./project.inlang",
 outdir: "./src/paraglide",
 }),
 // ... other plugins
 ],
})

//messages/en.json{"$schema":"https://inlang.com/schema/message","greeting":"Hello, {name}!","itemCount":"{count} {count, plural, one {item} other {items}}","welcomeBack":"Welcome back, {username}. You have {notifications, plural, =0 {no notifications} one {# notification} other {# notifications}}.","pricing":{"monthly":"${price}/month","annual":"${price}/year (save {savings}%)"}}

//messages/de.json{"$schema":"https://inlang.com/schema/message","greeting":"Hallo, {name}!","itemCount":"{count} {count, plural, one {Artikel} other {Artikel}}","welcomeBack":"Willkommen zurück, {username}. Sie haben {notifications, plural, =0 {keine Benachrichtigungen} one {# Benachrichtigung} other {# Benachrichtigungen}}.","pricing":{"monthly":"{price}€/Monat","annual":"{price}€/Jahr (sparen Sie {savings}%)"}}

//messages/zh.json{"$schema":"https://inlang.com/schema/message","greeting":"你好，{name}！","itemCount":"{count}{count, plural, other {个项目}}","welcomeBack":"欢迎回来，{username}。你有{notifications, plural, =0 {0条通知} other {#条通知}}。","pricing":{"monthly":"¥{price}/月","annual":"¥{price}/年（节省{savings}%）"}}

// src/lib/i18n.ts
import {
 languageTag,
 setLanguageTag,
 type AvailableLanguageTag,
} from "../paraglide/runtime"
import * as m from "../paraglide/messages"

export { languageTag, setLanguageTag, m }
export type { AvailableLanguageTag }

// src/components/Greeting.tsx
import { m, languageTag } from "../lib/i18n"

export function Greeting({ name }: { name: string }) {
 return (
 <div>
 <h1>{m.greeting({ name })}</h1>
 <p>
 {m.welcomeBack({
 username: name,
 notifications: 3,
 })}
 </p>
 <p>
 Current locale: <strong>{languageTag()}</strong>
 </p>
 </div>
 )
}

// src/routes/__root.tsx
import { createRootRouteWithContext, redirect } from "@tanstack/react-router"
import { languageTag, setLanguageTag } from "../lib/i18n"
import type { AvailableLanguageTag } from "../lib/i18n"

// Detect locale from URL or default to 'en'
function detectLocale(pathname: string): AvailableLanguageTag {
 const locales: AvailableLanguageTag[] = ["en", "de", "zh"]
 const match = pathname.match(/^\/(en|de|zh)\//)
 if (match && locales.includes(match[1] as AvailableLanguageTag)) {
 return match[1] as AvailableLanguageTag
 }
 return "en" // default
}

export const Route = createRootRouteWithContext<{
 locale: AvailableLanguageTag
}>()({
 beforeLoad: ({ location }) => {
 const locale = detectLocale(location.pathname)
 setLanguageTag(locale)
 return { locale }
 },
 notFoundComponent: () => <NotFound />,
})

// src/routes/index.tsx
import { createFileRoute, redirect } from "@tanstack/react-router"

// Redirect root to default locale
export const Route = createFileRoute("/")({
 loader: () => {
 throw redirect({ to: "/en" })
 },
})

// src/routes/$locale/index.tsx
import { createFileRoute } from "@tanstack/react-router"
import { m, languageTag } from "../../lib/i18n"

export const Route = createFileRoute("/$locale/")({
 component: HomePage,
})

function HomePage() {
 return (
 <main>
 <h1>{m.greeting({ name: "Developer" })}</h1>
 <p>Current language: {languageTag()}</p>
 </main>
 )
}

// src/components/LocaleSwitcher.tsx
import { Link, useMatchRoute } from "@tanstack/react-router"
import { useRouter } from "@tanstack/react-router"
import type { AvailableLanguageTag } from "../lib/i18n"

const locales: Record<AvailableLanguageTag, { label: string; flag: string }> = {
 en: { label: "English", flag: "🇺🇸" },
 de: { label: "Deutsch", flag: "🇩🇪" },
 zh: { label: "中文", flag: "🇨🇳" },
}

export function LocaleSwitcher() {
 const router = useRouter()
 // Use router state to get current locale
 const currentLocale = router.state.context.locale

 return (
 <div className="flex gap-2">
 {(Object.entries(locales) as [AvailableLanguageTag, typeof locales[AvailableLanguageTag]][]).map(
 ([tag, { label, flag }]) => (
 <Link
 key={tag}
 to={router.state.location.pathname.replace(
 /^\/(en|de|zh)/,
 `/${tag}`
 )}
 className={`px-3 py-1 rounded ${
 tag === currentLocale ? "bg-blue-500 text-white" : "bg-gray-100"
 }`}
 onClick={() => {
 // Update locale without full page reload
 import("../lib/i18n").then(({ setLanguageTag }) => {
 setLanguageTag(tag)
 })
 }}
 >
 {flag} {label}
 </Link>
 )
 )}
 </div>
 )
}

// src/lib/i18n.ts (extended)
const rtlLocales = new Set(["ar", "he", "fa"])

export function isRTL(locale: string): boolean {
 return rtlLocales.has(locale)
}

export function getDirection(locale: string): "ltr" | "rtl" {
 return isRTL(locale) ? "rtl" : "ltr"
}

// src/routes/__root.tsx (extended)
import { getDirection } from "../lib/i18n"

function RootLayout() {
 const { locale } = Route.useRouteContext()
 const dir = getDirection(locale)

 return (
 <html dir={dir} lang={locale}>
 <body>
 <LocaleSwitcher />
 <Outlet />
 </body>
 </html>
 )
}

// src/lib/format.ts
import { languageTag } from "../paraglide/runtime"

export function formatDate(
 date: Date | string,
 options?: Intl.DateTimeFormatOptions
): string {
 return new Intl.DateTimeFormat(languageTag(), {
 year: "numeric",
 month: "long",
 day: "numeric",
 ...options,
 }).format(new Date(date))
}

export function formatCurrency(
 amount: number,
 currency = "USD"
): string {
 return new Intl.NumberFormat(languageTag(), {
 style: "currency",
 currency,
 }).format(amount)
}

export function formatNumber(
 value: number,
 options?: Intl.NumberFormatOptions
): string {
 return new Intl.NumberFormat(languageTag(), options).format(value)
}

formatDate("2026-06-08")
// en: "June 8, 2026"
// de: "8. Juni 2026"
// zh: "2026年6月8日"

formatCurrency(29.99)
// en: "$29.99"
// de: "29,99 €"
// zh: "¥29.99"

formatNumber(1000000)
// en: "1,000,000"
// de: "1.000.000"
// zh: "1,000,000"

# Extract messages from source code
npx @inlang/cli extract --source messages/en.json --output messages/extracted.json

# Send to translation service (example: DeepL API)
curl -X POST "https://api.deepl.com/v2/translate" \
 -d "auth_key=$DEEPL_KEY" \
 -d "text=$(cat messages/extracted.json | jq -r '.[]')" \
 -d "target_lang=DE" > messages/de_translated.json

# Merge translations back
npx @inlang/cli merge --source messages/de_translated.json --target messages/de.json

{"checkout":{"paymentMethod":{"message":"Payment Method","comment":"Header shown above credit card / PayPal selection on checkout page"}}}

// ❌ Bad
const message = `Order #${orderId} from ${storeName}`

// ✅ Good
m.orderSummary({ orderId: "#1234", storeName: "My Shop" })

// src/components/SeoHead.tsx
import { Head } from "@tanstack/react-start"

interface HreflangProps {
 currentPath: string
 locales: string[]
}

export function HreflangTags({ currentPath, locales }: HreflangProps) {
 const baseUrl = "https://tanstackship.com"

 return (
 <Head>
 {locales.map((locale) => (
 <link
 key={locale}
 rel="alternate"
 hrefLang={locale}
 href={`${baseUrl}/${locale}${currentPath}`}
 />
 ))}
 <link
 rel="alternate"
 hrefLang="x-default"
 href={`${baseUrl}/en${currentPath}`}
 />
 </Head>
 )
}

// src/server/sitemap.ts
export async function generateSitemap(locale: string) {
 const posts = await getBlogPosts(locale) // Filter by locale
 const pages = getStaticPages(locale)

 const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 xmlns:xhtml="http://www.w3.org/1999/xhtml">
 ${[...pages, ...posts]
 .map(
 (page) => `
 <url>
 <loc>https://tanstackship.com/${locale}${page.path}</loc>
 <lastmod>${page.updatedAt}</lastmod>
 <xhtml:link rel="alternate" hreflang="en" href="https://tanstackship.com/en${page.path}"/>
 <xhtml:link rel="alternate" hreflang="de" href="https://tanstackship.com/de${page.path}"/>
 <xhtml:link rel="alternate" hreflang="zh" href="https://tanstackship.com/zh${page.path}"/>
 </url>`
 )
 .join("")}
</urlset>`

 return xml
}

// src/lib/content-i18n.ts
// For database-backed content with translations
interface TranslatedContent {
 locale: string
 title: string
 body: string
 slug: string
}

export async function getLocalizedContent(
 contentId: string,
 locale: string
): Promise<TranslatedContent | null> {
 const result = await env.DB.prepare(
 `SELECT locale, title, body, slug
 FROM content_translations
 WHERE content_id = ? AND locale = ?`
 )
 .bind(contentId, locale)
 .first()

 if (result) return result as TranslatedContent

 // Fallback to default locale
 return env.DB.prepare(
 `SELECT locale, title, body, slug
 FROM content_translations
 WHERE content_id = ? AND locale = ?`
 )
 .bind(contentId, "en")
 .first() as Promise<TranslatedContent | null>
}

CREATE TABLE content_translations (
 id TEXT PRIMARY KEY,
 content_id TEXT NOT NULL,
 locale TEXT NOT NULL CHECK (locale IN ('en', 'de', 'zh')),
 title TEXT NOT NULL,
 body TEXT NOT NULL,
 slug TEXT NOT NULL,
 created_at INTEGER NOT NULL DEFAULT (unixepoch()),
 updated_at INTEGER NOT NULL DEFAULT (unixepoch()),
 UNIQUE(content_id, locale)
);

CREATE INDEX idx_content_translations_locale
 ON content_translations(locale);