Lingo.dev Compiler

Lingo.dev Compiler is a free, open-source build-time translation system that makes React applications multilingual without modifying your components.

To see the compiler in action, check out this live demo: https://x.com/MaxPrilutskiy/status/1929946504216932746

Quick Example

Before adding the compiler:

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

After adding the compiler (no code changes needed):

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

How It Works

The compiler automatically detects translatable text in your JSX, generates AI-powered translations, and injects them at build time. Your source code stays unchanged—translations happen transparently during the build process.

Key principle: Translations are determined at compile time, creating optimized bundles with only the translations you need. This means faster load times, smaller bundles, and better SEO.

How It's Different

Unlike runtime translation libraries (i18next, react-intl), Lingo.dev Compiler:

  • Works at build time, not runtime
  • Requires no manual translation key management
  • Generates translations automatically using AI
  • Creates zero runtime overhead
  • Keeps your React code clean—no t() function calls

Key Features

  • Automatic by default - No "use i18n" directive required (optional if you want opt-in behavior)
  • Zero runtime overhead - Translations are pre-compiled into your build
  • Build modes - Use pseudotranslator in development, real translations in CI, cache-only in production
  • Type-safe - Full TypeScript support with automatic type generation
  • Manual overrides - Use data-lingo-override attribute for precise control over specific translations
  • Custom locale resolvers - Implement your own locale detection and persistence logic
  • Automatic pluralization - ICU MessageFormat support for plural forms
  • Development widget - In-browser translation editor for real-time editing

Supported Frameworks

  • Next.js (App Router with React Server Components)
  • Vite + React (SPA and SSR)

More frameworks coming soon.

Common Questions

Do I need API keys in production? No. Use buildMode: "cache-only" in production—translations are pre-generated in CI, no API calls needed.

Can I control which files are translated? Yes. Set useDirective: true to require 'use i18n' directive at the top of files you want to translate. Default is automatic (all files).

What if the AI translation is wrong? Use the data-lingo-override attribute to specify exact translations for specific locales. Works with any JSX element.

How do I test without API calls? Enable usePseudotranslator: true in development—it generates fake translations instantly so you can see what gets translated without API costs.

Next Steps