Alpha
The Lingo.dev Compiler is in alpha. It is unstable, not recommended for production use, and APIs may change between releases.
The data-lingo-override attribute gives you precise control over specific translations. When you need an exact translation for a brand name, legal text, or marketing headline, add the attribute to any JSX element and the compiler uses your provided translations instead of generating them with AI.
Basic usage#
Pass an object mapping locale codes to translations:
<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen", fr: "Bienvenue" }}>
Welcome
</h1>The compiler uses the override value for each specified locale. For locales not listed in the override object, the compiler generates translations normally.
How overrides work#
Compiler encounters a JSX element with data-lingo-override
During the AST analysis phase, the compiler detects the data-lingo-override attribute on the element.
Override values are extracted
The locale-to-translation mapping is read from the attribute value.
Overrides take precedence
For each locale present in the override object, the compiler uses the provided translation. AI translation is skipped for those locales. Locales not in the override are translated normally.
Use cases#
| Use case | Why override | Example |
|---|---|---|
| Brand names | AI may localize names that should stay consistent across languages | data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }} |
| Marketing copy | Specific phrasing crafted by a copywriter | data-lingo-override={{ es: "Tu motor de localizacion" }} |
| Legal text | Regulatory requirements demand exact wording | data-lingo-override={{ de: "Datenschutzerklarung" }} |
| Idioms and puns | Wordplay that requires human creativity | data-lingo-override={{ fr: "C'est la vie" }} |
| UI with strict character limits | AI translations may exceed space constraints | data-lingo-override={{ ja: "OK" }} |
Examples#
Paragraph text#
<p data-lingo-override={{ es: "Crea un motor de localizacion en Lingo.dev" }}>
Create a localization engine on Lingo.dev
</p>Attributes#
Overrides apply to the text content of the element. For translatable attributes like placeholder, alt, or aria-label, the compiler handles them separately through its standard attribute translation pipeline.
Partial overrides#
You do not need to provide overrides for every target locale. Supply only the locales that need manual control:
<h2 data-lingo-override={{ ja: "はじめに" }}>
Getting Started
</h2>In this example, Japanese uses the override while all other target locales receive AI-generated translations.
When to use overrides vs. other approaches#
| Approach | When to use |
|---|---|
data-lingo-override | Specific elements where you know the exact translation. |
| Glossary (Lingo.dev Engine) | Terms that should be translated consistently across the entire app. |
| Brand Voice (Lingo.dev Engine) | Tone and style preferences that apply to all translations. |
| Custom prompts | General translation instructions for all content. |
Overrides are the most granular option - they apply to a single element. For project-wide consistency, use a glossary or brand voice through the Lingo.dev localization engine instead.