Skip to main content

​
Overview

Translations in Unlingo are the actual content that gets displayed to users in different languages. The translation system supports complex nested structures, various data types, and provides a powerful visual editor for managing your multilingual content. Unlingo’s editor provides both tree view and JSON editing modes, making it accessible for both non-technical translators and developers who prefer working with code.

​
Translation Structure

​
Nested Keys

Translations are organized in a hierarchical structure using dot notation: 
{
    "common": {
        "buttons": {
            "save": "Save",
            "cancel": "Cancel",
            "submit": "Submit"
        },
        "navigation": {
            "home": "Home",
            "about": "About Us",
            "contact": "Contact"
        }
    },
    "auth": {
        "login": {
            "title": "Welcome Back",
            "subtitle": "Please sign in to continue",
            "form": {
                "email": "Email Address",
                "password": "Password",
                "remember": "Remember me"
            }
        }
    }
}
Accessing in code: 
t('common.buttons.save'); // "Save"
t('auth.login.title'); // "Welcome Back"
t('auth.login.form.email'); // "Email Address"

​
Data Types

Unlingo supports all JSON data types for translation values:

​
Strings

{
    "welcome": "Welcome to our application",
    "description": "This is a longer description text",
    "greeting": "Hello, {{name}}!"
}

​
Numbers

{
    "maxItems": 100,
    "price": 29.99,
    "version": 2.1
}

​
Booleans

{
    "isEnabled": true,
    "showAdvanced": false,
    "debugMode": false
}

​
Arrays

{
    "header": [
        {
            "title": "Dashboard",
            "subtitle": "Manage your account"
        },
        {
            "title": "Analytics",
            "subtitle": "Track your activity"
        }
    ]
}

​
Objects

{
    "header": {
        "title": "Dashboard",
        "subtitle": "Manage your account"
    }
}

​
Editor Interface

​
Tree View Mode

The default tree view provides a hierarchical interface:
  • Expandable nodes: Click to expand/collapse sections
  • Key organization: See the structure of your translations
  • Value editing: Click values to edit directly
  • Type indicators: Visual indicators for different data types
  • Search functionality: Find keys quickly across the tree

​
Adding Keys

  1. Click the ”+” button in selected node or “Add Key” button at the top
  2. Choose parent key if needed (optional, by default new keys are added to root level)
  3. Enter key name and initial value
  4. Select data type (string, number, boolean)

​
Deleting Keys

  1. Select the key to delete
  2. Click the trash icon
  3. Confirm deletion in the dialog
  4. Key and all children are removed
Deleting a key removes it and all nested children. This action cannot be undone. Also all languages in selected version will be affected after Save.

​
JSON Edit Mode

Switch to JSON mode for direct code editing:
  • Error detection: Real-time validation
  • Auto-formatting: Automatic code formatting
  • Bulk editing: Make large changes quickly

​
JSON Mode Features

  • Schema validation: Ensures valid JSON structure
  • Type checking: Validates data types

​
Add Key Modal

The Add Key modal provides a guided interface for creating new translations:

​
Key Information

  • Key Name: The identifier for the translation
  • Key Path: Full dot notation path
  • Parent Key: Context within the hierarchy

​
Value Configuration

  • Data Type: String, Number, Boolean, Object, Array
  • Initial Value: Starting content

​
Working with Translations

​
Creating Content

​
Simple Text

{
    "welcome": "Welcome to our application"
}

​
With Variables

{
    "greeting": "Hello, {{username}}! Welcome back.",
    "itemCount": "You have {{count}} {{count, plural, one {item} other {items}}}"
}

​
Nested Structure

{
    "dashboard": {
        "header": {
            "title": "Dashboard",
            "subtitle": "Manage your account"
        },
        "sections": {
            "overview": "Overview",
            "analytics": "Analytics",
            "settings": "Settings"
        }
    }
}

​
Editing Workflows

​
In-Place Editing

  1. Navigate to the key in tree view
  2. Click the value to start editing
  3. Make changes in the inline editor
  4. Press Apply button

​
Batch Editing

  1. Switch to JSON edit mode
  2. Make multiple changes to the JSON structure
  3. Validate changes with the syntax checker
  4. Save all changes at once

​
Find and Replace

  1. Use the search bar to find specific text
  2. Use browser find (Ctrl+F) in JSON mode
  3. Replace values across multiple keys
  4. Filter results by key path or value content

​
Validation and Quality Control

​
Automatic Validation

  • JSON syntax: Ensures valid structure
  • Key naming: Validates naming conventions
  • Data types: Checks type consistency
  • Required fields: Identifies missing values

​
Translation Completeness

  • Empty values: Indicated with warnings

​
Troubleshooting

  • Problem:
    • Edits are not being persisted.
  • Solutions:
    • Check network connectivity
    • Look for validation errors
  • Problem:
    • Invalid JSON preventing saves.
  • Solutions:
    • Check for missing commas or brackets
    • Use tree view mode for complex edits
  • Problem:
    • Keys not appearing in application.
  • Solutions:
    • Verify key path matches code usage
    • Check language and version selection
    • Ensure release includes latest version
    • Validate API integration
  • Problem:
    • Editor slow with many keys.
  • Solutions:
    • Use search/filter to narrow view
    • Split large namespaces into smaller ones
    • Edit in JSON mode for bulk changes

​
Next Steps

Screenshots

Learn visual translation mapping

Releases

Understand releases management
⌘I