Getting started

Click your React framework to get started:

npx gtx-cli@latest

What is General Translation?

General Translation is a complete internationalisation (i18n) stack that lets you ship multilingual apps quickly and easily.

General Translation includes the following:

• Open-source developer libraries for React and Next.js
• An AI translation service
• A complete infrastructure package for serving translation content

If you’d like to use GT libraries with your own translation provider, please see our standalone docs for gt-next and gt-react.

If you’d like to use your own i18n library but still use General Translation’s AI translation service, please see our CLI tool docs.

If you’d like to use General Translation to translate your JSON, Markdown, or MDX files, please see our CLI tool docs.

npx gtx-cli@latest

Run our set-up wizard to get started!

Features

⚛️ Translate entire React components inline

• A single opening and closing <T> component is all you need to translate an entire React component.
  • No need for complex refactoring or messy function calls.
• Content is inline and in the same location as your code.
  • No keys, strings, or additional files are needed!
• The library handles all i18n logic behind the scenes, so you don’t have to.
• Translations are always kept in sync with your source code.
• Translations include contextual information about the content, so they’re more accurate.

export default function Page() {
  return (
    <T>
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could include a <a href='/'>link</a> and have the text
        translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Feature parity with existing libraries

• GT libraries support the same features as established libraries like i18next, react-intl, and next-intl.
• Features such as dictionaries, plurals, currencies, and automatic routing are all supported.

🧠 Free AI‑powered translation service

• Our free AI‑powered translation service lets you create translations for your app in seconds.
• Translation hot reload will automatically update your translations as you write.
• HTML content is rearranged and customised according to the language.

🔧 Developer-friendly

• Setup is simple and can be done in minutes.
• All GT libraries are open source and work standalone.
  • You can use your own translation provider or our free AI-powered translation service.
• No more wasting time managing translation keys like t('menu.header.title').
  • Just write everything inline!

See our GitHub repo for the source code and some example projects.

Why choose General Translation?

General Translation is a complete i18n stack, including developer libraries, AI translations, and a full infrastructure package for multilingual apps.

You can mix and match our libraries with your own translation provider, or use our free AI‑powered translation service with your own i18n library.

For a seamless, end‑to‑end i18n experience, we recommend using our libraries with our translation service.

With GT libraries like gt-react and gt-next, you can:

1. Translate entire React components, not just strings

UI passed as the children of the <T> component will be translated regardless of how complex the JSX tree is. For example:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Any child elements of <b>the {`<T>`} component</b> will be translated.
      </p>
      <p>
        Elements like <a href='/'>links</a>
        {', '}
        <button>buttons</button>
        {', '}
        and even{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> deeply nested components </div>{' '}
          </div>{' '}
        </div>{' '}
        are translated.
      </p>
    </T> 
  );
}

2. Translate both client and server components

With first‑class support for the Next.js App Router and React Server Components, you can translate both client and server components.

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. Write content inline or in dictionaries

JSX content placed inside a <T> component is flagged for translation:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>Hello, world!</p> {/* translates <p>Hello, world!</p> */}
    </T>
  );
}

Alternatively, if you prefer using the historic dictionary approach, you can write your content in a dictionary file:

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // translates "Hello, world!"
}

4. View translated content in development

No need to worry about how the UI looks in different languages, General Translation will automatically translate your content as you write it in real time.

Instead of having to repeatedly revise your UI in production, simply write your content in English once and let General Translation handle the rest.

Need to see how your UI elements look in German before deploying? No problem — General Translation will translate them for you automatically!

5. Translate content on demand

Apps often need to translate content only known at runtime. For Next.js, GT libraries support translating content on demand.

Some common examples include:

• User-specific information
• Remotely stored content
• Dynamically generated content

Once the translation is loaded, it will update your component in real time with the new translated content.

Get started

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

Ready to go global? Start translating your app in minutes and reach users worldwide!