Translating JSX in place
The <T> component is the simplest way to translate content with General Translation. Wrap any block of JSX in <T> and the entire section gets translated as a unit, preserving structure and giving translators full context.
How it works
When you wrap content in <T>, General Translation extracts the text at build time, translates it, and swaps in the translated version at runtime. The JSX structure stays the same — only the text changes.
This means your styles, layout, and component hierarchy are completely unaffected. Headings remain headings. Paragraphs remain paragraphs. Links keep their destinations.
Wide wrapping for better translations
Rather than wrapping each string individually, wrap larger sections of related content in a single <T>. This gives the translator more context and produces more natural results.
Each section on this page is wrapped in one <T> component. The heading and all paragraphs within a section are translated together as a single unit, ensuring consistency.
Try it yourself
Use the language selector in the header to switch languages. Every piece of text on this page is translated using <T> — the headings, descriptions, and this very paragraph you are reading now.