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 and why they’re a good choice for software localization. 

JSON is a lightweight and flexible format, which makes it a popular option for storing and exchanging data in software projects. 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:

  • AI and machine learning that provides Better Than Human Translation
  • Git integration to keep your translations up to date with your codebase
  • A simple, developer-friendly process

To translate your JSON file into multiple languages, you can use PTC’s Free resource files translation tool. It’s designed by developers to be fast, reliable, and free.

To use Free resource files translation, just upload your source file, choose the languages you want to translate into, and wait for PTC to automatically translate the text.

In minutes, PTC delivers downloadable high-quality translations for your JSON file. As shown in the example below, PTC keeps labels in the source language ( English) and translates values into the target language ( Spanish).

The original JSON resource file in English and the Spanish translations generated by PTC

Integrate JSON File Translation Directly into Your Git Flow

In this tutorial, you’ve learned how to prepare your JSON files for translation by structuring key-value pairs, using placeholders for dynamic content, and organizing related text into groups. You’ve also discovered how to translate JSON files using PTC’s Free resource files translation tool.

Instead of having to upload your JSON files every time there’s new text, you can integrate PTC’s translation process directly into your Git flow. The full PTC integration offers:

Integration with Your Code Repository

Easily connect PTC with your Git repository for continuous, automated translations as your code evolves.

AI Translation with Proprietary Technology

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

Fast and Easy Review Process

Quickly review translations and make adjustments—all in a user-friendly interface that speeds up your workflow.

Multiple User Roles

Assign different roles to your team members, from developers to reviewers and project managers. PTC’s role-based system gives you the control to keep your project moving smoothly.

Unlimited Usage for a Low Price

With PTC, you don’t have to worry about unpredictable costs. 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.

Supported Resource File Formats

Start typing and press enter to search

Scroll to Top