Supported Resource File Formats

How to Translate JSON Files with PTC

In this guide, you’ll learn about JSON localization, internationalization, and how to prepare and translate JSON files using PTC’s AI-powered translation.

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 strings for software localization. 

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 using them to store translation values and how to easily translate these files into multiple languages.

Preparing for JSON Localization

To make your software multilingual, you need to prepare your JSON files for translation. These resource files 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 localization, you can quickly and easily translate it using PTC (Private Translation Cloud). 

Here’s an overview of the JSON translation process:

Integrate with Your Code Repository

With the help of the setup wizard, connect PTC with your code repository. PTC detects your resource files, asks for additional details to provide context-aware translations, and lets you choose the languages you want to translate into.

Get 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.

Enjoy Continuous Localization

Whenever you update your source language files, PTC detects the changes, generates new translations, and submits them as updated merge requests automatically.

Experience the full power of PTC with a free 30-day 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