Lingo.dev Docs

Appearance

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.