DEV Community

Raphael
Raphael

Posted on

There are countless i18n tools. I built another one anyway.

I have a day job as a software engineer at a bank. In the evenings, I build my own things. One of them is ChordPic, a small tool for making guitar chord diagrams. People from all over the world started using it, and at some point I wanted it to speak their language.

I knew exactly what that would mean. At work, I've used the usual i18n libraries in more than one app, and I didn't want to bring any of that into a project I build in my free time.

The part nobody puts in the README

If you've done this, you know the drill. Every piece of text in your app turns into a key. "Create chord chart" becomes t('editor.toolbar.create'). The actual sentence moves to en.json. Then you copy en.json to de.json, fr.json, es.json, and so on, and you get them translated somehow.

And then you keep shipping.

You change a button label, and now eleven files are out of date. You add a feature and forget one key in one language, and someone in Brazil sees editor.toolbar.share_tooltip on their screen. You open a component and can't read it anymore, because all the words are gone, replaced by dotted paths. You spend an evening on a "quick" copy change and most of it goes into JSON files.

For a big company with a localization team, maybe that's fine. For one person working evenings, it was the reason I kept putting off translating at all.

What I actually wanted

What I wanted was simple: write my app in English, the way I always do, and have it show up in other languages. No keys. No files to keep in sync. If I change a sentence, every language should follow.

So in December 2022 I started building it for myself. That became Magic Translate.

It works like this:

import { T } from '@magic-translate/react';

const Toolbar = () => (
  <button>
    <T>Create chord chart</T>
  </button>
);
Enter fullscreen mode Exit fullscreen mode

That's the whole idea. The text stays in your component. Magic Translate translates it with AI the first time it's seen, caches it, and serves the cached version after that. Change the sentence, and it gets translated again. Adding a new language is a single line of code, instead of translating hundreds of keys.

Along the way it grew into something I'm honestly proud of:

  • It renders translations on the server for Next.js and React Server Components, so search engines see real translated pages, not English that gets swapped out later.
  • There are clients for React, Vue, Angular and plain JavaScript.
  • If you don't like a translation, you can override it by hand and your override wins.

ChordPic now runs in 13 languages, including Arabic, Hindi, Persian and Chinese. I didn't write a single translation file for it. When I change some text on the site, I don't think about languages at all anymore. That still feels a bit like magic to me, which is where the name came from.

My favorite moments are when a ChordPic user writes to me and asks for their language. I add one line, and it's live in production the same day. Seeing someone's reply when the thing they asked for in the morning is there by the evening never gets old.

And then I tried to tell people about it

This is the part I didn't expect to be the hard one.

Search for "react i18n" and count the libraries. Then the translation management platforms. Then the "AI translation for your app" startups that seem to launch every week. The space is incredibly crowded. Whenever I post about Magic Translate, it disappears into that sea within a day. To a stranger scrolling past, it looks like one more i18n tool, and I get why. I'd scroll past it too.

But here's the thing I keep coming back to. If there are this many solutions, the problem isn't solved. Nobody builds the hundredth library for something that already works well. Every new i18n tool exists because somebody, somewhere, got as fed up with key files as I did. The sheer number of options isn't a sign that the space is done. It's a sign that developers are still looking.

I believe the answer is to stop making developers manage translations at all. I might be wrong about that. But I've been using it in production for years now, and I'm not going back.

So, a question for you

I'm good at building things. I'm clearly not good at getting them seen. So I'd love to hear from you:

  • How do you deal with translations in your apps today? What annoys you most?
  • If you've launched a developer tool into a crowded space, what actually worked for you?

And if you're curious, try it on a side project and tell me what's wrong with it: magictranslate.io. There's a free plan, and I read every message I get.

Thanks for reading.

Top comments (0)