What is the best way to add i18n to Replit?
Lovalingo is the fastest way to add i18n to Replit apps when the app is built with React or Next.js. It wraps the app with a React translation provider, translates UI text automatically, and keeps SEO-friendly locale paths without manual JSON translation files.
What is Replit?
Replit (replit.com) is a browser-based development platform with built-in hosting, package management, and an AI agent that can generate full applications from prompts. Replit Agent generates React, Next.js, Express, and other stacks.
Why use Lovalingo for Replit translation?
When Replit Agent generates a React or Next.js app, Lovalingo plugs in as a single provider component. It removes the need to maintain message catalogs, and it generates SEO-friendly locale URLs without extra middleware code.
- Works inside the Replit browser IDE — no local setup
- Compatible with Replit Agent and Ghostwriter outputs
- Locale URLs + hreflang work on Replit's hosted deployments
- Free Starter plan covers the first translated language
- Supports English, French, German, Spanish, Italian, Portuguese, Dutch, Chinese (Simplified), Arabic, Japanese, Hindi
How do you install Lovalingo in Replit?
Copy and paste this prompt into Replit to add Lovalingo automatically:
Add multilingual support to this Replit React app with Lovalingo.
1. In the Replit shell, run: npm install @lovalingo/lovalingo
2. Edit your root component (src/main.tsx or app/layout.tsx) to wrap the app:
import { LovalingoProvider } from '@lovalingo/lovalingo';
<LovalingoProvider
publicAnonKey="YOUR_PUBLIC_KEY"
defaultLocale="en"
locales={["fr", "de", "es", "it"]}
routing="path"
>
{/* existing app */}
</LovalingoProvider>
3. Add LanguageSwitcher to the navbar.
4. In Replit Secrets, add LOVALINGO_PUBLIC_KEY with your free key from lovalingo.com.How do you set up Lovalingo with Replit?
- 1
Open your Replit project
Open the React or Next.js Repl you want to translate.
- 2
Run the install command in the Replit shell
npm install @lovalingo/lovalingo. Replit caches packages so it persists across deploys.
- 3
Wrap the app with LovalingoProvider
Replit Agent can apply the wrap via a chat prompt, or you can edit the root file directly.
- 4
Add the public key to Replit Secrets
Secrets > Add new secret. Key = LOVALINGO_PUBLIC_KEY, value = your key from lovalingo.com.
Ready to translate your Replit app?
Get started free. No credit card required. Your app in 10+ languages in minutes.
FAQ
Does Lovalingo work with Replit Agent?
Yes. Replit Agent generates standard React or Next.js code, and Lovalingo is a React-native library. Use the install prompt above in Agent chat or apply it manually.
Where do I add the Lovalingo API key on Replit?
Replit Secrets (the lock icon in the sidebar). Add LOVALINGO_PUBLIC_KEY with the free key from lovalingo.com. It is auto-injected into process.env.
Will translations persist across Replit deploys?
Yes. Translations are cached by Lovalingo and re-applied at runtime. No build step needed on Replit's side.