Essential Developer Tools for Internationalization: JSON Differ & ICU Message Editor

Localization (i18n) is more than just translating words—it's about managing complex file structures, handling dynamic content, and ensuring quality across languages. As developers, we often struggle with two specific pain points:

1. Managing huge JSON translation files: Spotting what changed between two versions of a 5,000-line JSON file is a nightmare with standard diff tools.
2. Writing complex ICU messages: Syntax errors in plurals or select statements often crash applications at runtime.

At IntlPull, we faced these exact challenges. So, we built two powerful tools to solve them, and we're making them available for free to the community.

1. Visual JSON Translation Differ

Standard diff tools like git diff or text comparators are line-based. They don't understand the structure of JSON. If you reorder keys or change indentation, standard tools show the entire file as changed.

Our JSON Translation Differ is semantically aware. It understands that JSON is an object, not just lines of text.

Key Features

• Structure-Aware Comparison: Ignores key order changes and formatting differences. It only highlights actual content changes.
• Nested Key Support: Automatically flattens and compares nested objects (e.g., auth.login.title) so you can see exactly which leaf node changed.
• "Show/Hide Unchanged": Toggle to focus exclusively on what's new, removed, or modified.
• Visual Color Coding:
  • <span style="color: #4ade80">Green</span> for added keys.
  • <span style="color: #f87171">Red</span> for removed keys.
  • <span style="color: #facc15">Yellow</span> for modified values.
• Exportable Reports: Generate a JSON report of the differences to share with your localization team or attach to a Pull Request.

Use Case: Reviewing Translation Updates

Imagine your translation agency sends back a new es.json. Before merging it into your codebase, you want to ensure they didn't accidentally delete keys or change keys that shouldn't have been touched.

Using the JSON Differ:

1. Paste your original es.json on the left.
2. Paste the new file on the right.
3. Instantly see that 5 keys were added, 0 removed, and 12 changed.
4. Verify that no critical keys are missing before merging.

2. ICU Message Editor & Validator

The ICU Message Format is the industry standard for handling plurals, gender select, and variable substitution. However, the syntax is notoriously difficult to write and easy to break.

A missing closing brace } or a typo in a keyword can cause your entire React or Next.js app to throw a runtime error.

Our ICU Message Editor provides a safe sandbox to write, test, and validate your messages.

Key Features

• Real-Time Preview: Type your message and instantly see how it renders.
• Variable Playground: The tool automatically detects variables (e.g., {name}, {count}) and generates input fields so you can test different values.
• Syntax Validation: Get immediate feedback if your braces are unbalanced or your syntax is invalid.
• Pre-Built Templates: deeply confused about how to write a plural? One-click templates for:
  • Plurals: {count, plural, =0 {No items} other {# items}}
  • Select: {gender, select, male {He} female {She} other {They}}
  • Date/Time/Number: Standard formatting patterns.

Use Case: deeply Nested Plurals

Writing a sentence like "You have 3 messages in 2 folders" where both numbers are dynamic is complex.

Standard approach: Guess the syntax, run the app, see it crash, try again.

With ICU Editor:

1. Open the ICU Editor.
2. Use the "Multiple Variables" template.
3. Type: You have {msgCount, plural, =1 {# message} other {# messages}} in {folderCount, plural, =1 {# folder} other {# folders}}.
4. Test with msgCount=1, folderCount=5 -> "You have 1 message in 5 folders."
5. Test with msgCount=2, folderCount=1 -> "You have 2 messages in 1 folder."
6. Copy the validated string to your code.

Why We Built These

We built these tools because we needed them for IntlPull, our localization management platform. While building a system to automate translations, we realized that the "simple" tasks of checking diffs and writing syntax were still manual and error-prone.

These tools are free parts of our mission to improve the developer experience for internationalization.

Ready to Optimize Your Workflow?

• Start comparing files with the JSON Differ.
• Test your strings with the ICU Message Editor.
• For a complete solution, check out IntlPull to automate your entire translation workflow.