Overriding translations

Problem

Lingo.dev Compiler uses large language models to translate content, which are inherently non-determinstic. In some cases though, you want to translate a specific piece of text in a specific way, rather than letting the model decide.

Solution

Use the data-lingo-override-[locale] attribute on a React element, where:

• [locale] is the language code of a configured target locale
• the value of the attribute is the text to use for that locale

When the compiler runs, it will skip translating any elements with this attribute (for the specified locales) and instead use the provided value.

You can override multiple attributes at once.

Example: Overriding a translation

export function App() {
  return <button data-lingo-override-es="¡Hola!">Hello!</button>;
}

Example: Overriding multiple translations

export function App() {
  return (
    <button
      data-lingo-override-es="¡Hola!"
      data-lingo-override-fr="Bonjour!"
      data-lingo-override-pt="Olá!"
    >
      Hello!
    </button>
  );
}