Alpha
The Lingo.dev Compiler is in alpha. It is unstable, not recommended for production use, and APIs may change between releases.
The Lingo.dev Compiler includes development tools that make it fast to iterate on multilingual UI without calling external APIs. These tools help you verify that all text is translatable, test layout with varying text lengths, and debug translation issues during development.
Pseudotranslator#
The pseudotranslator generates instant fake translations by wrapping source text in visual markers. No API key is needed, no network calls are made, and results appear immediately.
Enable it in your compiler config:
{
dev: {
usePseudotranslator: true,
},
}What it produces#
| Source text | Pseudotranslation |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
The markers ([!!! ... !!!]) make translated text visually distinct from untranslated text. If you see raw English in the UI while pseudotranslator is enabled, that text is not being processed by the compiler.
Use cases#
Identify untranslated strings
Run your app with pseudotranslator enabled. Any text that appears without the [!!! ... !!!] markers is not being detected by the compiler. This happens when text is stored in variables outside JSX, or when a component is outside the sourceRoot directory.
Test layout with longer text
Pseudotranslations are longer than the source text (due to the marker characters). This simulates languages like German or French that typically produce 20-30% longer text than English, revealing layout overflow issues early.
Verify interpolation
Placeholders like {count} and {name} should appear inside the pseudotranslation markers. If a placeholder appears outside the markers or is missing, the compiler may not be preserving it correctly.
The pseudotranslator respects the same translation pipeline as real providers - it processes the same AST analysis and code injection steps. The only difference is the translation generation step, where markers replace the LLM call.
Translation server#
During development, the compiler runs a local translation server that handles on-demand translation requests. The server starts automatically when you run npm run dev.
How it works#
The translation server listens on a local port and handles translation requests from the dev build pipeline. When a new or changed string is detected, the compiler sends it to the server, which routes it to the configured translation provider (or pseudotranslator).
Port configuration#
The server auto-finds an available port in a configurable range:
{
dev: {
translationServerStartPort: 60000,
},
}| Option | Default | Description |
|---|---|---|
translationServerStartPort | 60000 | Starting port number. The server tries ports sequentially (60000, 60001, ..., 60099) until it finds one available. |
translationServerUrl | auto-detected | Override the server URL entirely. Useful for connecting to a remote translation server or custom proxy. |
If all ports in the range 60000-60099 are occupied, the server fails to start. See Troubleshooting for how to resolve port conflicts.
Dev widget (coming soon)#
An in-browser translation editor that lets you view and edit translations in real time while navigating your app. The widget overlays your UI and shows translation details for each text element.
Planned features:
- Click any text element to see its source text, translations, and metadata
- Edit translations directly in the browser
- Changes save to
.lingo/metadata.jsonimmediately - Toggle between locales without reloading
Status
The dev widget is under development and not yet available. Follow the changelog for release updates.
Recommended dev configuration#
For the fastest development experience, combine pseudotranslator with the default translation server settings:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}When you are ready to preview real translations, disable the pseudotranslator and restart the dev server:
{
dev: {
usePseudotranslator: false,
},
}The compiler then generates real translations for new or changed strings using your configured translation provider.