Supported Resource File Formats

How to Translate JSON Files with PTC

Learn how to prepare JSON files for translation and easily translate them using PTC (Private Translation Cloud).

JSON (JavaScript Object Notation)  files store key content for user interfaces in frameworks like React, Vue.js, Angular, React Native, Swift (iOS), and Kotlin (Android). This content includes labels, error messages, and notifications. To support multiple languages in your software, you need to translate this text.

PTC (Private Translation Cloud) makes translating JSON files fast and accurate. With AI that creates Better Than Human Translation and Git integration, PTC ensures your translations stay up to date with your codebase.

In this tutorial, you’ll learn how to structure JSON files for translation and how to use PTC to translate the content in your JSON files, allowing your software to support multiple languages.

How JSON Files Store and Display Text

Before translating the text in your JSON files, it’s important to understand how these files store content for software localization. 

JSON is a lightweight and flexible format. Its structure allows both humans and machines to easily read and manage content, making it ideal for handling translations.

JSON files contain key-value pairs, with each key representing a label and the value holding the content you want to display. For example:

{

  "welcomeMessage": "Welcome to our site",

  "contactButton": "Contact Us"

}

Here, "welcomeMessage" serves as the key, and "Welcome to our site" represents the value (the text users see).

Some frameworks or libraries may use more complex formats. For example, WordPress uses a JED format, which is generated from .po files. However, in most cases, JSON files rely on key-value pairs to handle translations.

While JSON files serve many purposes, we’ll focus on how to use them for storing translation values and how to easily translate these files into multiple languages.

Preparing a JSON File for Translation

To make your software multilingual, you need to organize your JSON files for translation. These files act as resource files that store all user-facing text, such as headings, buttons, and error messages.

In most JavaScript frameworks like React, Vue.js, and Angular, you need to create and manage JSON resource files manually. Libraries such as i18next (for React) and vue-i18n (for Vue.js) help automate parts of this process. 

To create clear JSON files that both translators and tools can work with:

Step 1

Identify Text Strings for Translation

Start by going through all the text you want to display to users and include it in your JSON file as key-value pairs. This includes headings, button labels, error messages, and tooltips. Remove any text that isn’t meant for translation, such as developer comments.

Make your keys as descriptive as possible so that both translators (or PTC’s AI translation) and developers can easily understand them. Avoid generic names like "button1" or "text2". Instead, use meaningful keys, such as "contactButton" or "welcomeMessage”. For example, an English resource file might look like this:

{

  "welcomeMessage": "Welcome to our site",

  "contactButton": "Contact Us",

  "errorMessage": "An error occurred. Please try again."

}

For larger or more complex files, grouping related content into sections using nested structures makes them more organized and easier to maintain. For example:

{

  "homepage": {

    "title": "Welcome to our Website",

    "description": "Discover our products and services"

  },

  "footer": {

    "contact": {

      "phone": "Phone",

      "email": "Email"

    },

    "legal": {

      "terms": "Terms of Service",

      "privacy": "Privacy Policy"

    }

  }

}

Step 2

Use Placeholders for Dynamic Content

You’ll need to use placeholders if your text contains changing elements, like a user’s name or a number. Placeholders act as markers for dynamic content that will change based on the user or context.

Example with placeholder:

{ "welcomeMessage": "Hello, {userName}!", 

"dateMessage": "Today is {currentDate}." 

}

In this example, {userName} and {currentDate} serve as placeholders. Translators – both human and automatic – recognize these placeholders and leave them untranslated, focusing only on the text around them. Once translated, the placeholders stay in place and display the correct values when your software runs.

Of course, the placeholder syntax varies depending on the library or configuration you’re using. The format shown here offers just one example, and your project might use a different placeholder structure based on its setup.

Step 3

Group Related Content

For larger JSON files, grouping related strings into sections makes translation easier and more efficient. By organizing similar content—such as navigation labels, form messages, or error notifications—into categories, you provide valuable context. This makes it easier for both translation tools and human translators to understand the purpose of each string and deliver more accurate translations.

Example:

{

  "navigation": {

    "home": "Home",

    "about": "About Us"

  },

  "form": {

    "submitButton": "Submit",

    "resetButton": "Reset"

  }

}

Translate the JSON File

Now that you’ve prepared your JSON file for translation, you can quickly and easily translate it using PTC (Private Translation Cloud). 

With PTC, you get:

Integration with Your Code Repository

In just a few steps, connect PTC with your code repository. PTC detects your resource files and provides continuous, automated translations.

AI-Powered, Better Than Human Translations

PTC combines powerful AI with our proprietary technology, delivering translations that don’t just capture the words but truly understand your content. The result? Accurate, context-aware translations.

A Customizable Glossary

Define how key terms and names appear in your software across languages.

Unlimited Usage for a Low Price

With PTC, you get unlimited translations and full access to all features for a low fee, making it an ideal solution for both small and large projects.

Experience the full power of PTC with a 30-day free trial

Automate your JSON translations, integrate PTC with your Git repository, and save time—no strings attached.

Start your free PTC trial
Supported Resource File Formats

Start typing and press enter to search

Scroll to Top