# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/en-GB/docs/next/api/components/tx.mdx
---
title: Tx
description: API reference for the Tx component
---

## Overview

The `<Tx>` component translates JSX content at runtime.

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

The `<Tx>` component supports translating plain text as well as complex JSX structures.
Additionally, it provides features for handling variables, plurals, and context-specific translations.
`<Tx>` is server-side only.

<Callout>
  **Runtime Translation:**
  `<Tx>` translations occur at runtime.
  This means translation will be performed live.
</Callout>

***


## Reference

### Props

<TypeTable
  type={{
"children": {
    type: 'any',
    optional: false,
},
"context?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
"locale?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
"maxChars?": {
    type: 'number',
    optional: true,
    default: 'undefined',
},
}}
/>

### Descriptions

| Prop       | Description                                                                                                                   |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `children` | The content to be translated. This can include plain text or JSX structures.                                                  |
| `context`  | Additional context to refine the translation. Useful for resolving ambiguous phrases.                                         |
| `locale`   | An optional locale to use for the translation. Will default to the browser&#39;s most preferred locale supported by your app. |
| `maxChars` | An optional maximum character count for the translation. The library strictly enforces this limit.                            |

***

## Behaviour

`<Tx>` translates JSX at runtime.
This means translations are performed live, so you can translate content that is only known at runtime.
The trade-off is that there can be a noticeable delay while an on-demand translation loads.

While loading, `<Tx>` will return undefined unless the languages are similar (en-US vs en-GB), though this behaviour can be customised with render settings.
If an error occurs, `<Tx>` will return the original content.

Our advice is to translate everything you can at build time using [`<T>`](/docs/next/api/components/t), [`getGT`](/docs/next/api/strings/use-gt), or [`useGT`](/docs/next/api/strings/use-gt),
and only use on-demand translations, such as `<Tx>` and [`tx`](/docs/next/api/strings/tx), when necessary.

Make sure to follow the [deployment guide here](/docs/next/tutorials/quickdeploy).

***

## Examples

### Basic usage

The `<Tx>` component translates its children at runtime.

```jsx title="SimpleTranslation.jsx" copy
import { Tx } from 'gt-next/server';

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx>
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```

### With variables

You can use the `<Var>` component to mark children as variables.
This allows you to mark content that should not be translated.

```jsx title="DynamicGreeting.jsx" copy
import { Tx, Var } from 'gt-next/server';

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}
```

### With plurals

The `<T>` component also supports pluralisation using the `<Plural>` component.

```jsx title="ItemCount.jsx" copy
import { Tx, Plural } from 'gt-next/server';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```

### Limitations

The `<Tx>` function only translates its descendants.

```jsx title="Example.jsx" copy
import { Tx } from 'gt-next/server';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <Tx>
            {/* [!code highlight] */}
            <div><b>This is valid!</b></div> // will be translated 

            {/* [!code highlight] */}
            <ValidTranslation> // will be translated 
            {/* [!code highlight] */}
                Hello, world!
            {/* [!code highlight] */}
            </ValidTranslation>

            <InvalidTranslation /> // will not be translated
        </Tx>
    );
}
```

<Callout>
  **Note:** A good rule of thumb is that any content that is *literally* between the two `<Tx>` tags in the file will be translated.
  You can always add another `<Tx>` to translate content that is not being translated, though nesting `<Tx>` components is not recommended.
</Callout>

***

## Notes

* The `<Tx>` component is designed for translating content in your application at runtime.
* Use the `<Tx>` component to translate plain text or JSX structures, including variables and pluralisation.

## Next steps

* For build-time translations, look into the [`<T>`](/docs/next/api/components/t) component.
* For more advanced features, see the [`<T>` reference](/docs/next/guides/t).
* For translating strings, look into [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt), and [`useGT`](/docs/next/api/strings/use-gt).