Token discovery
"Token discovery" is how the SDK figures out what needs translating — automatically, from the way you write your UI. There are four building blocks, each for a different shape of content.
t() — an inline string
The workhorse. Call it with the source text and it returns the translation for the current locale (or the source text itself if that locale isn’t ready yet). The optional category groups related phrases and is passed to the machine translator as context; params fill in {placeholders}.
const t = useT();
// t(phrase, category?, params?)
t('Hello, {name}!', 'Greetings', { name });<Translate> — a content block
Wrap a region of markup and the SDK tokenizes it into a content block — each text node becomes a phrase — then re-translates the whole block on every locale change. It's keyed by a stable id derived from its content and category, so the same block is recognized across renders and reloads.
<Translate category="Home">
<p>Welcome to our store. Browse the catalog in your language.</p>
</Translate><Phrase> — one sentence, with markup
When a sentence contains inline markup or interpolation, <Phrase> keeps it as a single translatable unit — so "Hi Sarah, you have 3 items" is translated as one natural sentence rather than broken fragments. It supports params and pluralization.
<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
Hi %name%, you have %count% items in your cart.
</Phrase>Placeholder markers. Author interpolation as {name}. Inside markup where a framework already claims { } (JSX, Vue, Svelte), write %name% instead — the SDK normalizes it back to {name} when it captures the phrase.
<DontTranslate> — leave it alone
Brand names, code, identifiers, addresses — mark a region to never be translated. It renders translate="no" and is skipped by discovery entirely.
<p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>Discovery only happens with a write key. In the browser you ship a read-only key, so the SDK never registers anything — it only fetches translations that already exist. Registration is a development-time activity. See Keys & environments.