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:
{
"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:
# 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:
npx lingo.dev@latest i18n
This automatically:
- Reads your source language JSON files
- Identifies new or modified content
- Translates only what's changed
- Creates or updates target language files
Smart JSON Handling
Nested Structures
Lingo.dev preserves complex hierarchies in your translation files:
{
"nav": {
"home": "Home",
"about": {
"team": "Our Team",
"mission": "Our Mission"
}
}
}
Framework-Specific Features
Supports special syntax used by popular i18n libraries:
{
"items": {
"one": "{{count}} item",
"other": "{{count}} items"
}
}
Advanced Configuration Options
Exclude Specific Files
Keep certain files untranslated:
"json": {
"include": ["locales/[locale]/*.json"],
"exclude": ["locales/[locale]/config.json"]
}
Protect Technical Content with Key Locking
Prevent translation of specific keys:
"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:
"buckets": {
"json": {
"include": ["locales/[locale].json"]
},
"markdown": {
"include": ["docs/[locale]/*.md"]
}
}
Why Developers Choose JSON Translation
- Framework Agnostic: Works with any frontend technology
- Zero Adaptation: Fits into your existing workflow without changes
- Context-Aware: AI understands the meaning behind your strings
- Incremental Updates: Only translates what's changed, saving time and resources
- 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.