JSON Tools
Role: Software engineer, designer
Technologies Used:
- Typescript
- Next.js
- Web Workers
- transformers.js
- Xenova/nllb-200-distilled-600M AI machine translation model
- Anthropic API
- franc natural language detector
Localization libraries like react-i18next store translated strings as flat JSON files — one per language, with the same keys and translated values:
1// en.json 2{ 3 "Title": "Hello, world!", 4 "Description": "A starter website" 5}
1// es.json 2{ 3 "Title": "¡Hola Mundo!", 4 "Description": "Un sitio web de inicio" 5}
Translating dozens of values across multiple languages by hand with tools like Google Translate is tedious, and keeping those translations consistent with a brand's voice is a separate challenge entirely. JSON Tools tackles both problems: it translates JSON values between languages and transforms their tone to match a target brand voice.
Translating Values
The translation mode accepts a flat JSON file, detects its source language using the franc library (with support for 187 languages), and translates every value to one or more target languages. Users can correct the detected language if franc gets it wrong, which is more likely with smaller files.
Translations are powered by the Xenova/nllb-200-distilled-600M model, which supports 200 languages and runs entirely in the browser via transformers.js. A Web Worker keeps the model off the main thread so the UI stays responsive while it loads. I chose an in-browser model over the Google Translate API to avoid per-request costs and to explore what's possible with client-side AI.
The model is generally accurate but can take creative liberties — translating "Hello" to Spanish, for example, sometimes returns "Hola, ¿que pasa?" (translates to "Hello, what's up?") instead of just "Hola." Users should review translations before shipping them.
Transforming Tone
The tone transformer mode rewrites JSON values to match a specific voice or register using the Anthropic API (Claude). It's useful when a codebase already has copy that works, but the tone needs to shift — say, from blunt error messages to supportive ones, or from marketing-speak to technical documentation.
The tool includes four built-in presets (Neutral to Friendly, Casual to Professional, Marketing to Technical, and Error Message to Supportive). Users can also write a custom tone description for more specific needs. Beyond tone direction, users can define a glossary of terms that must appear exactly as written, a list of banned phrases with optional replacements, and additional style rules. These settings can be exported and imported as a style guide JSON file, making it easy to share a brand voice configuration across a team.
Results appear in a side-by-side editor or a diff view that shows each change alongside the AI's reasoning. Large files are processed in batches of 30 entries, and the tool preserves interpolation variables and HTML tags throughout.