Skip to content

Translate JSON Files for Any Frontend Framework

Simplify your frontend localization with Lingo.dev's powerful JSON translation capabilities - perfect for React, Vue, Angular, or any framework that uses JSON for internationalization.

Quick Setup

Create an i18n.json configuration file in your project root:

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

This simple configuration:

  • Sets English as your source language
  • Targets Spanish, French, and German translations
  • Looks for files in the locales folder with locale-based naming (e.g., en.json, es.json)

Find Available Languages

Discover all supported languages with these commands:

bash
# View source language options
npx lingo.dev@latest show locale sources

# View target language options
npx lingo.dev@latest show locale targets

One Command Translation

Translate all your JSON files with a single command:

bash
npx lingo.dev@latest i18n

This automatically:

  1. Reads your source language JSON files
  2. Identifies new or modified content
  3. Translates only what's changed
  4. Creates or updates target language files

Smart JSON Handling

Nested Structures

Lingo.dev preserves complex hierarchies in your translation files:

json
{
  "nav": {
    "home": "Home",
    "about": {
      "team": "Our Team",
      "mission": "Our Mission"
    }
  }
}

Framework-Specific Features

Supports special syntax used by popular i18n libraries:

json
{
  "items": {
    "one": "{{count}} item",
    "other": "{{count}} items"
  }
}

Advanced Configuration Options

Exclude Specific Files

Keep certain files untranslated:

json
"json": {
  "include": ["locales/[locale]/*.json"],
  "exclude": ["locales/[locale]/config.json"]
}

Protect Technical Content with Key Locking

Prevent translation of specific keys:

json
"json": {
  "include": ["locales/[locale].json"],
  "lockedKeys": [
    "app/version",
    "settings/apiKey",
    "branding/companyName"
  ]
}

Key locking notes:

  • Use forward slash (/) as the separator for nested keys
  • Works with keys containing dots (e.g., config/api.url)
  • Compatible with nested objects and array elements

For more details, see the Key Locking documentation.

Multi-Format Projects

Configure multiple file types in a single project:

json
"buckets": {
  "json": {
    "include": ["locales/[locale].json"]
  },
  "markdown": {
    "include": ["docs/[locale]/*.md"]
  }
}

Why Developers Choose JSON Translation

  1. Framework Agnostic: Works with any frontend technology
  2. Zero Adaptation: Fits into your existing workflow without changes
  3. Context-Aware: AI understands the meaning behind your strings
  4. Incremental Updates: Only translates what's changed, saving time and resources
  5. Structure Preservation: Maintains your exact JSON structure and formatting

By integrating Lingo.dev into your development workflow, you get powerful AI-driven translations while maintaining complete control over your localization files and process.