How to translate JSON content?

Summary

JSON translations help you translate dynamic content that is loaded via JSON on your website. This is common for menus, labels, messages, or content loaded through APIs. If the JSON comes from the same domain as your Clone, Clonable can translate it automatically by targeting the right JSON keys. This article explains where to find JSON translations, how to recognize JSON on your site, and how to safely translate it without breaking functionality.

FAQ

Where can I find JSON translations in Clonable?

You can find them under Dashboard > Advanced Settings > JSON translations.

Why do I only see JSON exclusions instead of JSON translations?

If JSON exclusions are shown, JSON translations are not available for your clone and this article does not apply.

Can all JSON be translated?

No. Only JSON loaded from the same domain as the clone can be translated.

Can JSON translations break my website?

Yes. Translating the wrong keys can break functionality, so careful selection is important.

⏱️ Reading time: 8–10 minutes

What are JSON translations?

Many websites load content dynamically using JSON instead of hardcoded HTML. This content is often invisible in the normal page source but still appears on the page.

Clonable allows you to translate this content by telling the system which JSON keys contain translatable text.

JSON translations are configured per clone and apply automatically once set.

Where to find JSON translations

You can manage JSON translations in the Clonable dashboard:

1. Open your clone
2. Go to Advanced settings
3. Open JSON translations

If you see JSON exclusions instead, you can skip this article because JSON translations are not active for your setup.

Standard JSON translations

Some JSON keys almost always contain human-readable text. Clonable provides a built-in default list for these.

The default JSON keys are:

• html
• text
• content
• title
• translation
• body

These are listed under default entry and usually improve translation results without extra configuration.

Platform-specific defaults are clearly marked as required for that platform.

How to recognize JSON on a website

JSON can appear in two main ways on a website.

Static JSON in the source code

Static JSON is embedded directly in the page source.

How to find it:

1. Open the page in your browser
2. Press Ctrl + U to view the page source
3. Search for <script type="application/json">

Example:

<script type="application/json">
{ "title": "This is a test page", "color": "blue", "include_in_page": false }
</script>

If the JSON appears like this, it can be translated by Clonable.

Dynamic JSON via API requests

Dynamic JSON is loaded after the page starts loading, usually via APIs like REST or GraphQL.

How to find it:

1. Open your browser’s developer tools (F12 or right-click > Inspect)
2. Open the Network tab
3. Refresh the page
4. Look for requests with type json
5. Click a request and open the Response tab

The response will show the JSON data used by the page.

How to translate JSON

Clonable translates JSON by matching keys inside key-value pairs.

Example:

"title": "Test page"

Here, title is the key and "Test page" is the value. To translate this text, you add title to the JSON translations list.

Using wildcards for dynamic keys

Some JSON structures are nested or contain dynamic keys. In these cases, wildcards are useful.

Example JSON:

{
  "page": {
    "content": {
      "value": "Clonable JSON translations",
      "paragraph": {
        "value": "You can use Clonable to translate your JSON."
      }
    }
  }
}

Using:

• page.*.value translates only one level deep
• page.**.value translates all nested value keys at any depth

Using absolute JSON paths

Sometimes you only want to translate a key in one specific place.

Example:

{
  "pages": {
    "home": {
      "model": "New model now available"
    },
    "pricing": {
      "model": "pricing_model_1"
    }
  }
}

To translate only the home text, use:

• pages.home.model

This avoids translating configuration values that should remain unchanged.

Dangerous JSON keys

Some keys control logic or configuration instead of text. Translating these can break your site.

Keys to avoid unless absolutely necessary:

• value
• id
• model
• class

If you must use them, always combine them with absolute paths.

Platform-specific JSON handling

Magento

Magento 2 often embeds JSON configuration directly in the page source.

Example:

<script type="text/x-magento-init">
{ "my_config": { "attribute_1": "Purple", "title": "Configuratie" } }
</script>

Keys inside these scripts can be added to JSON translations and translated normally.

Next.js

JSON translations do not always work on Next.js websites.

Limitations:

• Server-side React components cannot be translated
• Some translations may revert after page reload

In many cases, untranslated text comes from __NEXT_DATA__.

Example:

<script id="__NEXT_DATA__" type="application/json">
{"props":{"pageProps":{...}}}
</script>

If menus or labels remain untranslated, search for their keys inside this JSON and add them to the JSON translations list.

Tags

api localization, dynamic content translation, graphql responses, rest endpoints, frontend data, javascript data

Updated on: 06/02/2026