Repository navigation
Example: React + Vite (react-i18next) #1
Description
Add a React + Vite example localized with npx babelize translate. The CLI wraps hardcoded strings in react-i18next calls and writes the locale files.
- Folder:
react-vite - Stack: Vite + React + TypeScript (
npm create vite@latest -- --template react-ts) - Babelize support: supported
How every example is built
Follow nextjs-app-router: it's the reference for structure, design and commits.
- Before. Build the Tasklane landing page in this stack with hardcoded English text, the way an app looks before localization. Use the same copy and design as
nextjs-app-router(itsapp/globals.cssand components): header, hero with the product preview, three feature cards, signup panel, footer. Make sure it builds and runs. Commit:<folder>: add the Tasklane app before localization. - Babelize run. From the example's folder, with a clean working tree, run:
Commit the output unedited:
npx babelize translate --to fr,de,ja
<folder>: run npx babelize translate --to fr,de,ja. In the commit body, give the CLI version and the provider: signed in without a key (Babelize hosted), or your own LLM key. If some keys fail, re-run until they're done and say how many runs it took. - Review fixes. Build and run it, then fix what a reviewer would catch. Typically: keep the brand name "Tasklane" untranslated, use one plural message instead of a
count === 1 ? … : …ternary, add a language switcher, and correct the translations. For identical English strings, the corrected ones innextjs-app-router/public/locales/*.jsoncan be reused. Commit:<folder>: review fixes after the Babelize run, with a bullet list of what you fixed. - README. Add
<folder>/README.mdin the style ofnextjs-app-router/README.md: what Babelize changed and what was fixed in review (each linking its commit), and how to run it. Add a row to the table in the root README.
Done when
- The three commits above, in order, and the README
- It builds, and renders in en, fr, de and ja with a working language switcher
- Any CLI bug you hit is reported on the issue (what you ran, what happened)
Activity
aditigavasane911 commentedon Oct 28, 2026
Hi! I'd like to take this one.
I'll build the Tasklane landing page in Vite + React + TypeScript using the same copy and design as nextjs-app-router. Then I'll follow the steps in the issue: the "before" commit, the unedited
npx babelize translate --to fr,de,jarun, the review-fix commit, and the README with the root table row.I'll note the CLI version and provider in the commit body, and report any CLI bugs I hit here on the issue.
I'll aim to open a PR within 3 days.
sapatmohit commentedon Oct 28, 2026
Hi @aditigavasane911, thanks for picking this up! It's assigned to you. No rush or deadline, take the time you need to do it properly.
A few details so the example matches
nextjs-app-routerand shows what Babelize does on its own:Localization must come from Babelize
react-i18next, no locale files, not()calls. Plain hardcoded English, like a real app before localization.npx babelize translateproduces. Please don't set up i18n by hand, translate strings yourself, or use another tool or AI assistant for that step. If the CLI misses something or gets it wrong, that's useful to see: fix it in the review commit and list it there.How to run it
@babelize/cli1.3.10 or later (npx babelize@latest translate --to fr,de,jamakes sure you get the latest).npx babelize auth loginfirst. The free plan's 10,000 monthly credits easily cover this app (one run is about 2,200).nextjs-app-routerwas made the same way, signed in without an LLM key, so the results stay comparable. If you'd rather use your own LLM key, that's fine too; just say which provider and model in the commit body.react-vite/with a clean working tree, and commit everything it writes, including.babelize/(the lockfile).Review fixes and README
en,fr,de,ja.nextjs-app-router/components/LanguageSwitcher.tsx.The PR
mainwith the three commits kept separate (please don't squash them, the history is the point of the example). Don't commitnode_modules/ordist/.If you get stuck on anything, or run out of credits along the way, just let us know here and we'll sort it out (we can top up your account). Questions are welcome anytime.
aditigavasane911 commentedon Oct 28, 2026
sapatmohit commentedon Oct 28, 2026
Sounds great, thanks @aditigavasane911!
Two small things:
No deadline. I edited my comment after you'd read it: take the time you need to do it properly, there's no rush on the 3 days.
The exact command. GitHub's email notification hid part of it (it treats
babelize@latestlike an email address). It's:If you get stuck on anything or run out of credits, just let us know here.