# General Translation Changelog: compiler 1.3.0: Automatic `<T>` wrapping at build time
URL: https://generaltranslation.com/en-US/blog/compiler_v1_3_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-06

## Overview

The GT compiler now supports **auto JSX injection** for client-side React SPAs. It automatically wraps translatable JSX text in [`<T>`](/docs/react/reference/components/t) components at build time, so you don't have to.

Previously, every translatable string needed a manual [`<T>`](/docs/react/reference/components/t) wrapper. With `enableAutoJsxInjection`, the compiler handles this for you. Write plain JSX; the compiler does the rest.


| Package | Version |
|---------|---------|
| `@generaltranslation/compiler` | 1.3.0 |
| `gt-react` | 10.17.0 |
| `gt-next` | 6.15.2 |

## Setup

Auto JSX injection builds on the [bootstrap-based SPA architecture](/devlog/gt-react_v10_12_0) introduced with the [`t()`](/docs/react/reference/functions/t-function) function. You need to set up the bootstrap entry point first, then add the compiler plugin.

### 1. Bootstrap entry point

Create a `bootstrap.tsx` that loads translations before your app renders:

```tsx
// bootstrap.tsx (new entry point)
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

await bootstrap({
  ...gtConfig,
  loadTranslations,
});

await import('./main.tsx');
```

Update your `index.html` to point to `bootstrap.tsx` instead of `main.tsx`.

### 2. Install the compiler

```bash
npm install @generaltranslation/compiler
```

### 3. Vite

```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import gtConfig from './gt.config.json'
import { vite as gtCompiler } from '@generaltranslation/compiler'

export default defineConfig({
  plugins: [react(), gtCompiler({gtConfig})],
})
```

### 4. gt.config.json

Enable auto JSX injection in your config:

```json
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```

## What it does

Before — you had to wrap every translatable string manually:

```jsx
import { T } from "gt-react/browser";

export default function Hero() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

After — just write JSX:

```jsx
export default function Hero() {
  return <h1>Welcome to our app</h1>;
}
```

The compiler injects the [`<T>`](/docs/react/reference/components/t) wrappers at build time. No imports, no IDs, no boilerplate.

### Variable injection

Dynamic expressions are automatically wrapped in [`<Var>`](/docs/react/reference/components/var) too:

```jsx
// You write:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// The compiler produces:
import { T, Var } from "gt-react/browser";

export default function Greeting({ name }) {
  return (
    <T>
      <p>Hello, <Var>{name}</Var>!</p>
    </T>
  );
}
```

## Links

- [Compiler concepts](/docs/react/reference/config)
- [compiler v1.0.0 devlog](/devlog/compiler_v1_0_0_gt-next_v6_7_0) — original compiler release for React
- [PR #1158](https://github.com/generaltranslation/gt/pull/1158)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.