> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.clonable.net/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

| Start with the default entry before adding custom keys.

---

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

||| Dynamic JSON must come from the same domain as the clone. JSON from other domains or subdomains cannot be translated.

---

## 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

| Start with single-level wildcards before using double wildcards.

---

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

||| Incorrect JSON translations can cause server errors like 422 or 500 responses.

---

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

||| JSON translations are not guaranteed to work on all Next.js setups.

---

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