"What if we built a tool that's just cool, useful, and fun to work on?" we thought to ourselves after our bootstrapped, profitable B2B side project was acquired.
"What if we build a compiler?.."
The problem
Here's a counterintuitive fact we learned: ~80% of the world doesn't speak English.
Does that mean most of the Internet users can't use the side-projects we build?
That's A LOT of people!
Shouldn't we be building multi-language apps by default, from day one, then?!
What if?
I18n always was a huge headache. Extracting text, managing JSON files, writing custom sync scripts, asking a native-speaking teammate to double-check the translations...
Over the past few years, I've built hundreds of React apps: both at work and for side projects. I used tens of i18n libraries out there (react-intl <3), but none of them was a perfect match.
But what if we could build an i18n tool that wouldn't require touching JSX at all, while also using specially purposed AI for translation, right during the build?
Wouldn't that be cool?
It's called Replexica
My co-author Veronica comes from the Data Science + AI background. I've been using React since its first release and have built a compiler for a made-up programming language in the past, for fun (don't ask 😅).
And we both love building stuff!
So, we built Replexica: an AI-powered i18n engine for React.
It comes in two parts:
-
Replexica Compiler - a plugin for React compiler.
Long story short - Replexica Compiler traverses the Abstract Syntax Tree (AST) of the React app and infers metadata + text that needs to be translated.
It can't do everything just yet, though with Next.js App Router it works well, and we aim to release the Pages Router support by the end of the month.
-
Replexica Cloud - an AI-powered engine in the cloud to perform translations.
The Cloud engine uses a combination of open-source + proprietary AI models. Think Llama + Google Vertex AI + GPT + Mixtral, wired together to translate the app, fully aware of the app's purpose and domain, and the more it's used, the better it gets.
The API spec is open, so anyone could build their own translation engine (self-hosting guide coming soon!).
Bonus
We made Replexica support legacy i18n approach too: you can setup Replexica to use your existing i18n JSON or YAML files, and it will manage them for you, on autopilot.
Now - on to the technical stuff.
Replexica Compiler 101
We thought it'd be really cool to show a quick TLDR of the first version of the compiler API.
Basically, it plugs into the React compilation process, and the rest of the React code remains untouched:
// next.config.mjs
// Import Replexica Compiler
import replexica from '@replexica/compiler';
// Configure Replexica Compiler
const replexicaConfig = {
locale: {
source: 'en',
targets: ['es'],
},
};
// Existing Next.js config
const nextConfig = {};
// Export the Next.js config
export default replexica.next(
replexicaConfig,
nextConfig,
);
That's it! (unless you use 'use client' components, if so - check out the docs).
We've been working on Replexica for the past several months, but some parts are still complex, and we're working on simplifying them. For example, the Next.js Pages Router is still in the works, and we're adding support for Remix and Create React App soon in May.
In terms of the Cloud, we're adding 2 more languages in April and hoping to add 10 more by the end of the year!
Progress
We've built the first version and showed it to several people. Most of them liked it, and some of them shared it with their friends. And some of them likely posted it elsewhere also...
... and now we're sitting on 500 GitHub stars! Adding 20-50 stars a day, and we're panicking a bit about what we should do next! 😅
For some, 500 stars might not seem like a big deal. React has 221,000 stars, for example.
But hey, for us, 500 is a lot – we thought we'd get 10!
What's next
What do we do next? You tell us!
At this point, we're excited to see where this project goes, and we're super hungry for feedback.
Right now, we're working on the Next.js Pages Router, and we're adding support for Remix and Create React App soon in May, as well as adding more languages to the Cloud.
We're also working on the docs!
Thank you! ❤️
And that's about it.
We're incredibly happy with the result. Our batteries are charged to the full with the community support, and we ready to ship more! 😎
We want to give every side-project a disproportionate advantage: to unlock instant i18n, hence much wider reach.
If you want to contribute, report a bug, or just hang out with us, drop by our new Discord channel to say hi.
... and don't forget to star Replexica 🌟 on GitHub! 😉
Top comments (23)
Wooohooo! Major congrats, Max. This is super awesome to hear!
Haha! You're damn right it'd be cool. So happy to hear that y'all are pursuing this idea AND that you're having such success with it.
This is good stuff! 🙌
Thank you Michael!!
Just having fun, and trying to build a useful tool. 🫡
This is so cool & feels like a win-win for everyone.
We switched from React to Webflow due to their multilingual plugin / support when we built a product that went viral & would have preferred to do it via a package.
Yep! We saw some also choose Framer for the website part because of the same issue.
Though oftentimes, nothing can replace the feeling of coding apps in JavaScript yourself. 😅
Congratulations Max! I wish your project reaches many thousand stars!
I am impressed by your humility, only expecting 10 stars while you built such a great project (even though it may appear simple to you, it is NOT by any means). Thank you for sharing it and for making it open source
Thank you Andreas! Means a lot, honestly. Just trying to build a helpful tool, while having fun in the process.
I'm glad you liked it!
Congratulations! 500 stars is not a joke. But what about users, do you have any?
Yes!! 🤩
Great work, I am finding a good i18n solution.
OHHH wow congrats, go get it ! you can definitely grow this in something successful!
Thanks Nick! :)
Congrats Max! Huge milestone!
What's next for Replexica?
As other said - 501st star! 🤣
On a serious note - next, we aiming to release full React.js support ASAP! As currently we're nextjs app router only.
Super cool! I've never liked i18n but this makes it so easy 🤯
I was wondering how does the AI engine understand the purpose and domain of the app for translations? I guess it's from the code right?
Great questions! Yep - it's both from the metadata extracted from the code, and also from the info saved in the i18n dashboard!
excited to give this a try!
cool! does it support translated routes like /en or /es that's good for SEO?
Yep, that's possible :)
We're doing that internally too, but that isn't actually a part of the tool. Now I'm thinking we gotta prep some guides for that at least!
The next is 501 🤗
Congrats, that's huge man continue that way! 🔥
Thank you Erwan!
Cool stuff 🔥
Would love to hear more about the language models: why do you use multiple ones, how were they trained, etc. Could some knowledge be shared with no harm to the ip? :)
Yep! Though that's a tough one. Simply put, we're using a combination of everything to make sure the result is not just correct - that it has the same meaning, intention, and 'flavor' as the original, and some models are simply better at certain tasks than others.