React + Vite Localization Example

Demonstrates localizing a React + Vite app at the source level with the Lingo.dev CLI (@lingo.dev/cli) and @lingo.dev/react. You wrap UI strings in l.text(...) with context, run lingo extract to generate a hash-keyed message catalog, then lingo push to translate it — no manual translation keys.

Full walkthrough: lingo.dev/en/guides/web-app

What's inside

• src/App.tsx — UI built with useLingo().text(source, { context })
• src/main.tsx — LingoProvider + a locale switcher that loads the active catalog
• src/i18n/messages.ts — loads the matching locale's JSONC into the provider
• src/i18n/messages/*.jsonc — extracted (en) and translated (es/fr/de) catalogs
• lingo.d.ts — generated types that make context required at compile time
• .lingo/config.json — Lingo.dev CLI configuration

Quick start

pnpm install

# Authenticate and link this repo to your engine
lingo login
lingo link

# 1. Extract strings from l.text() calls → src/i18n/messages/en.jsonc + lingo.d.ts
lingo extract

# 2. Translate the catalog into every target locale
lingo push --wait

# 3. Run it
pnpm dev

Catalogs are committed under src/i18n/messages/. This repo ships fully translated. After you add or edit an l.text(...) call, re-run lingo extract then lingo push --wait. To bootstrap a brand-new locale, add it to .lingo/config.json and run lingo push --backfill-missing.

How it works

Strings live in code, not in translation files:

const l = useLingo();
<p>{l.text("Track every expense, in every currency.", { context: "Hero tagline" })}</p>

lingo extract scans the source, hashes each (source + context) pair into a stable key, and writes src/i18n/messages/en.jsonc plus lingo.d.ts (which makes context a required argument — TypeScript fails the build if you forget it). lingo push translates the catalog into src/i18n/messages/<locale>.jsonc.

At runtime, src/i18n/messages.ts loads the active locale's catalog (import.meta.glob) and LingoProvider serves it to useLingo(). Switching locale swaps the catalog — no page reload, no route changes required.

Automate in CI (optional)

Want translations on every push or PR without running the CLI yourself? See the CI/CD Workflows guide — the Lingo.dev GitHub App translates automatically once installed.

Locales

• Source: en
• Targets: es, fr, de

Links

• Guide: Web App Localization
• Lingo.dev CLI docs
• Create a free account