Powered by

Localization Lab

Structured Localization Playground

Left column stays English as the source of truth. Right column renders the selected locale for side-by-side comparison.

Source

English baseline

Stable reference copy for side-by-side review.

Target

Localized preview

Active locale: Espanol

Source

English

Target

Espanol

1. Build-Time Localization (Lingo Compiler)

Static UI strings are extracted at build time and served in the target locale.

Release dashboard

Welcome back, Ashish.

Localization checks passed for this branch.

Target locale: Espanol

Panel de lanzamiento

Bienvenido de nuevo, Ashish.

Las comprobaciones de localización pasaron para esta rama.

// Build-time localized component
export function Header({ name }: { name: string }) {
  return <h3>Welcome back, {name}.</h3>;
}

How it works: Lingo Compiler rewrites static copy to keyed lookups, and the target provider resolves those keys for the selected locale.

2. Runtime Translation (Lingo SDK / MCP)

Dynamic text is translated on demand through the SDK-backed API route.

Source locale is fixed to English.

Target locale: Espanol

Translation output appears here after request.

const translated = await translateText(
  sourceText,
  targetLocale,
  "en",
);

How it works: The client posts source text to /api/translate, which calls Lingo SDK and returns locale-specific output.

3. RTL Behavior (target column only)

Arabic applies right-to-left direction only inside the target preview.

Direction: ltr

The target panel can flip direction without moving source text.

CheckoutAddressPayment

Direction: ltr (ES)

El panel de destino puede cambiar de dirección sin mover el texto de origen.

PagarDirecciónPago
const targetDirection = locale === "ar" ? "rtl" : "ltr";
<div dir={targetDirection}>{content}</div>

How it works: Direction is derived from the selected target locale, and applied to the right demo container only so the source column stays stable.

4. Locale Formatting (currency, date, number)

Formatting updates through Intl based on locale conventions.

Locale
EN
Currency
$1,250,000.50
Number
1,250,000.5
Date
Wednesday, January 15, 2025 at 12:00 PM
Configuración regional
ES
Moneda
1.250.000,50 €
Número
1.250.000,5
Fecha
miércoles, 15 de enero de 2025, 12:00
new Intl.NumberFormat(locale, {
  style: "currency",
  currency: getCurrencyForLocale(locale),
}).format(amount);

How it works: Locale-specific formatters apply proper grouping, symbols, and date ordering with no string templates.

5. Workflow Automation (Lingo CLI + CI snippet)

Localization checks run in development and are enforced in CI before shipping.

Developer loop

npx lingo.dev run

Source locale baseline coverage: 100%

CI status: fail (coverage below required threshold).

# .github/workflows/localization.yml
- run: npx lingo.dev run
- run: npm run build

How it works: CLI refreshes translation artifacts locally, and CI blocks merges when localized output is missing.