Product
Services
Solutions
BlogDocs
Back

JSON Format Guide

JSON is a lightweight, text-based data interchange format that's widely used for web applications and modern development frameworks.

Why choose JSON?

Universal compatibility — Supported by virtually every programming language and framework
Simple structure — Easy to read, write, and parse
Flexible organization — Supports both flat and nested key structures
Web-standard — Native format for JavaScript and modern web frameworks

Basic structure

Simple key-value pairs

{"welcome": "Welcome to our app!","login": "Log in","signup": "Sign up","cancel": "Cancel"}

Nested structure

{"auth": {
    "login": "Log in",
    "signup": "Sign up",
    "forgot_password": "Forgot password?"},"navigation": {
    "home": "Home",
    "profile": "Profile",
    "settings": "Settings"}}

With variables

{"welcome_user": "Welcome, {{username}}!","items_count": "You have {{count}} items","price_display": "Price: ${{amount}}"}

Plural forms in JSON

JSON supports multiple plural formats in Localit.io:

JSON object format

{"files": {
    "one": "{{count}} file",
    "other": "{{count}} files"}}

JSON string format

{"files": "{{count}} file | {{count}} files"}

i18next v4 format

{"files_one": "{{count}} file","files_other": "{{count}} files"}

ICU format

{"files": "{count, plural, one {{{count}} file} other {{{count}} files}}"}

Important: When uploading JSON files with plurals, select the correct plural format in upload settings for proper recognition.

Character encoding and special characters

Encoding

Always use UTF-8 encoding for JSON files to ensure proper display of international characters.

Escaping special characters

{"quotes": "He said \"Hello world\"","backslash": "Path: C:\\Users\\Name","newline": "Line 1\nLine 2","unicode": "Copyright \u00A9 2024"}

Common escape sequences

  • \" — Double quote

  • \\ — Backslash

  • \n — New line

  • \t — Tab

  • \r — Carriage return

  • \uXXXX — Unicode character

Working with JSON in Localit.io

Upload process

  1. Select JSON format during file upload

  2. Choose appropriate plural format if your file contains plurals

  3. Enable "Convert to universal placeholders" for multi-platform projects

  4. Configure other upload settings as needed

123

Key organization

Localit.io preserves your JSON structure:

  • Flat keys: "welcome", "login", "signup"

  • Nested keys: "auth.login", "auth.signup", "navigation.home"

  • Array keys: Handled as separate translation units

Export options

When exporting to JSON, you can:

  • Maintain original structure — Keep your nested organization

  • Choose placeholder format — Export with different variable formats

  • Filter by status — Export only completed translations

  • Customize file naming — Set specific file names for each language

Best practices

Organize keys logically

✅ Good structure:{"auth": {
    "login": "Log in",
    "logout": "Log out",
    "signup": "Sign up"},"errors": {
    "network": "Network error",
    "validation": "Invalid input"}}

❌ Poor structure:{"login": "Log in","error1": "Network error", 
  "signup": "Sign up","error2": "Invalid input"}

Use descriptive key names

✅ Good naming:{"button_save": "Save","error_network_timeout": "Connection timeout","message_welcome_new_user": "Welcome to our platform!"}

❌ Poor naming:{"btn1": "Save","err": "Connection timeout","msg": "Welcome to our platform!"}

Handle plurals consistently

✅ Consistent plural structure:{"files": {
    "one": "{{count}} file",
    "other": "{{count}} files"},"messages": {
    "one": "{{count}} message", 
    "other": "{{count}} messages"}}

Keep values concise

  • Use short, clear text for mobile interfaces

  • Consider character limits for different platforms

  • Avoid overly long sentences that might not fit UI elements

Common frameworks and libraries

React/React Native

import translations from './locales/en.json';

function MyComponent() {
  return <Text>{translations.welcome}</Text>;
}

Vue.js with vue-i18n

{"welcome": "Welcome!","user_greeting": "Hello, {name}!"}

Angular with ngx-translate

{"WELCOME": "Welcome!","USER_GREETING": "Hello, {{name}}!"}

i18next

{"welcome": "Welcome!","user_greeting": "Hello, {{name}}!","files": {
    "one": "{{count}} file",
    "other": "{{count}} files"}}