Inline Translations

Overview

Inline translations let you write and translate your content directly in your code

No separate dictionary or translation files required.

This makes it easy to keep your UI and translations in sync, and is perfect for projects where content changes frequently or is tightly coupled to your components.

Why Use Inline Translations?

• Simplicity: No need to manage external translation files.
• Complexity: Content and code live together, reducing context switching.
• Instant updates: Changes to text are immediately reflected in all languages.
• Maintainability: No need to worry about keeping your translations up to date or deleting unused translations.

Whether you have text, HTML, or JSX, everything can be translated. No additional configuration necessary!

import { T } from 'gt-react';

export default function MyComponent() {
  return (
    <T>
      <h1>List of Shakespeare Plays: </h1>
      <ul>
        <li>Hamlet</li>
        <li>A Midsummer Night's Dream</li>
        <li>Macbeth</li>
      </ul>
    </T> 
  );
}

To learn more, see the specific reference for the corresponding framework: