Automate react-i18next Translations with AI

Babely translates your locales/[locale].json files while preserving {{interpolation}}, nested namespaces, and plural keys — the most widely used React i18n library.

Why teams automate this

Nested JSON keys are tedious to maintain

react-i18next projects often use deep objects like user.profile.title. Adding a language means duplicating entire trees by hand.

Interpolation breaks easily

Placeholders like {{name}} and {{count}} get corrupted when using generic translation tools that do not understand i18next syntax.

Locale files drift from source

Without automation, Spanish and German files fall behind English after every sprint, causing missing keys in production.

How it works

Initialize Babely in your React project

Run init from your project root and configure Babely to watch your react-i18next locale files.

npx @babely/cli@latest init

Configure locales/[locale].json

Point Babely at the JSON path your i18next backend loads. Set source and target locales in babely.json.

{
  "locale": {
    "source": "en",
    "targets": ["es", "de", "fr"]
  },
  "files": {
    "json": {
      "include": ["locales/[locale].json"]
    }
  }
}

Translate changed keys

Run translate after editing English strings. Babely detects Git diff changes and generates translations only where needed.

npx @babely/cli@latest translate

Wire into CI

Add Babely to your GitHub Action or CI pipeline so locale files stay in sync on every pull request.

# See docs/github-actions for the full workflow

Example babely.json

Copy this config into your project root and adjust targets to match your locale folders.

{
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "files": {
    "json": {
      "include": ["locales/[locale].json"]
    }
  }
}

Why Babely for react-i18next

Interpolation-safe

{{name}}, {{count}}, and other i18next placeholders stay intact after AI translation.

Nested namespaces supported

Deep JSON structures translate without flattening your react-i18next resource bundles.

Works with i18next ecosystem

Same JSON format works for react-i18next, i18next, and most React/Vue i18n setups.

Git-aware workflow

Only modified keys are sent for translation, keeping costs low and diffs reviewable.

Other use cases

next-intl

Babely translates your messages/[locale].json files while preserving ICU plurals, select rules, rich text tags, and nested keys — the same stack we use on babely.dev.

next-international

Babely translates your locales/[locale].ts modules while preserving TypeScript structure and nested keys — a lightweight alternative to next-intl for Next.js apps.

Nuxt

Babely translates your Nuxt locale JSON files while preserving linked keys, interpolation, and layout namespaces — the only Vue stack example in the Babely repo.

Start translating your react-i18next project

Set up Babely in minutes, automate translations in CI, and ship multilingual products without enterprise localization overhead.

Read the guide Quickstart

Frequently Asked Questions

Does Babely preserve {{interpolation}} syntax?

Yes. Babely understands i18next interpolation placeholders and keeps them unchanged in translated strings.

Can I use multiple namespaces?

Yes. Add multiple include paths in babely.json for each namespace file, or use a glob pattern that matches all your locale JSON files.

Does this work with react-i18next and SSR?

Yes. Babely manages translation files on disk. Your existing i18next initialization and SSR setup continue to work unchanged.

Does Babely replace react-i18next?

No. Babely automates translation file generation. Your app still uses react-i18next for runtime translation and language switching.