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
src/App.tsx— UI built withuseLingo().text(source, { context })src/main.tsx—LingoProvider+ a locale switcher that loads the active catalogsrc/i18n/messages.ts— loads the matching locale's JSONC into the providersrc/i18n/messages/*.jsonc— extracted (en) and translated (es/fr/de) catalogslingo.d.ts— generated declarations that narrowl.text()to the extracted strings and their contexts.lingo/config.json— Lingo.dev CLI configuration
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 devCatalogs 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.
Strings live in code, not in translation files:
const l = useLingo();
<p>{l.text("Track every expense, in every currency.", { context: "Hero tagline under the app title" })}</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. context is a required argument either way — what the generated declarations add is narrowing: l.text() only accepts strings you have extracted, each with the exact context it was extracted under, so a typo in either fails the build. That only works while lingo.d.ts is inside the TypeScript program, which is why it is listed in tsconfig.json's include. 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.
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. The App reads engineId from the committed .lingo/config.json, so run lingo link and commit the updated file before installing it.
- Source:
en - Targets:
es,fr,de