How it Works

Lingo.dev Compiler automates React app localization at build time through intelligent code analysis and AI-powered translation.

When you run your build process, the compiler performs the following steps to make your app multilingual without changing your source code:

1. AST Analysis

Lingo.dev Compiler processes your React code's Abstract Syntax Tree (AST) to deterministically identify translatable content. It analyzes:

  • JSX text content and attributes
  • String literals within React components (Support for string literals coming soon.)
  • Dynamic content patterns

The compiler understands React component boundaries and maintains contextual information for accurate translations.

2. Content Extraction

The compiler extracts translatable strings while preserving:

  • Component hierarchy and context
  • React-specific patterns like props and state
  • Code structure and formatting

Only human-readable content is extracted. Technical identifiers, code snippets, and non-translatable elements are automatically filtered out.

3. Fingerprinting & Versioning

Content fingerprinting ensures efficient translation management:

  • MD5 hashing creates unique content fingerprints
  • Versioned dictionaries track changes in the lingo/ directory
  • Git integration maintains translation history
  • Delta processing only translates new or modified content

This approach minimizes translation costs and maintains consistency across builds.

4. AI Translation

Translation happens through AI models with contextual understanding:

  • AI model integration provides fast, high-quality translations through Lingo.dev Engine or one of the supported LLM providers
  • Contextual boundaries help AI understand component relationships
  • Consistent terminology across your entire application
  • Batch processing for optimal performance

The compiler sends contextual information to ensure translations fit naturally within your UI components.

5. Code Injection

Translations are injected back into your build without modifying source files:

  • Build-time processing creates localized versions
  • Framework integration works with Next.js, Vite, and React Router
  • Optimized bundles with per-locale dictionary loading
  • Runtime efficiency through pre-compiled translations

The result is production-ready, multilingual React apps with minimal runtime overhead.

Framework Integration

Next.js App Router

The compiler integrates with Next.js through the configuration system:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Server Components are processed at build time
  • Client Components receive optimized translation bundles
  • Automatic routing supports locale-based URLs

React Router / Remix

Integration through Vite plugin architecture:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Server-side rendering with preloaded dictionaries
  • Client-side hydration maintains translation state
  • Route-based code splitting includes translation bundles

Vite

Direct Vite plugin integration:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Hot module replacement updates translations during development
  • Build optimization creates minimal production bundles
  • Asset handling manages translation files efficiently

Development Workflow

  1. Write React components using natural language text
  2. Run development server - compiler extracts and translates content
  3. Review translations in the generated lingo/ directory
  4. Commit translation files to version control
  5. Deploy with built-in multilingual support

Production Benefits

  • Zero runtime cost - translations are pre-compiled
  • Optimal bundle sizes - only used translations are included
  • SEO friendly - proper locale-specific rendering
  • Consistent UX - professional translation quality

The compiler creates production apps that feel natively built for each supported language while maintaining your original development workflow.

LLM providers

Option 1. Lingo.dev Engine

Lingo.dev Compiler can use Lingo.dev Engine as your AI translation engine.

It provides dynamic model selection, auto-routing to different models for each language pair, automated model fallbacks, translation memory that considers past translations, and glossary support for your project's domain-specific terminology. There are both free and paid options, and the free Hobby tier should be sufficient for most projects.

To authenticate, run:

npx lingo.dev@latest login

Configure Lingo.dev Engine as your provider, eg. for Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

Important detail. If you're using Brave browser, or your browser extensions are blocking the authentication flow, you can manually authenticate by adding a LINGODOTDEV_API_KEY environment variable to your .env file:

LINGODOTDEV_API_KEY=...

Option 2. Alternative LLM Providers

The compiler supports following LLM providers:

You need to create an account and retrieve API key from the LLM provider you choose to configure.

Note: Make sure to activate your account with LLM provider and accept their Terms of service before using it in Compiler. The LLM provider might prevent you from using their platform before you complete all the steps. The steps may vary for each LLM provider.

Configure LLM provider of your choice, eg. to use Groq in Next.js app:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

Add your API key for your configured LLM provider to your environment:

# .env
GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

We'd love to support more LLMs - talk to us or send us a pull request!

Next Steps